Update src/streamlit_app.py

src/streamlit_app.py

@@ -5,8 +5,8 @@ import re
 import io
 import time
 import requests
-import matplotlib.pyplot as plt
-import seaborn as sns
+import plotly.graph_objects as go
+import plotly.express as px
 from datetime import datetime, timezone
 from textblob import TextBlob
 from scipy.stats import pearsonr
@@ -35,11 +35,11 @@ if 'page' not in st.session_state:
     st.session_state.page = "uji_kalimat"
 
 # ==============================
-# "CSS HACKING" - VANCOUVER BITCOIN VIBE (ORANGE BLUR)
+# "CSS HACKING" - STYLING GLOBAL & TOMBOL
 # ==============================
 st.markdown("""
 <style>
-    /* Mengimpor Font Inter (Standar Industri Web Web3/Crypto) */
+    /* Mengimpor Font Inter */
     @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
 
     /* Menyembunyikan elemen bawaan Streamlit */
@@ -47,22 +47,8 @@ st.markdown("""
     footer {visibility: hidden;}
     header {visibility: hidden;}
     
-    /* Pengaturan Font & Background Global */
     html, body, [class*="css"] {
         font-family: 'Inter', sans-serif !important;
-        color: #0F172A !important; /* Warna teks gelap utama */
-    }
-
-    /* BACKGROUND HACK: Efek "Ngeblur Sedikit Opacity" Warna Oranye.
-       Menggunakan radial-gradient untuk menciptakan pendaran (glow) di latar belakang putih.
-    */
-    .stApp {
-        background-color: #FAFAFC;
-        background-image: 
-            radial-gradient(circle at 10% 10%, rgba(247, 147, 26, 0.12) 0%, transparent 40%),
-            radial-gradient(circle at 90% 90%, rgba(247, 147, 26, 0.08) 0%, transparent 40%),
-            radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8) 0%, transparent 100%);
-        background-attachment: fixed;
     }
 
     /* Padding Kontainer Utama */
@@ -72,83 +58,113 @@ st.markdown("""
         max-width: 1200px !important;
     }
 
-    /* STYLING TOMBOL STREAMLIT (Dibuat Mirip Tombol Website Asli) 
-    */
+    /* =========================================
+       STYLING TOMBOL (Ala Vancouver Bitcoin)
+       ========================================= */
     div[data-testid="stButton"] > button {
-        background-color: #F7931A !important; /* Orange Bitcoin */
+        background-color: #0F172A !important; /* Warna Gelap Pekat */
         color: #FFFFFF !important;
-        border: none !important;
-        border-radius: 8px !important;
-        font-weight: 600 !important;
-        padding: 0.6rem 1.8rem !important;
-        box-shadow: 0 4px 10px rgba(247, 147, 26, 0.25) !important;
+        border: 2px solid #0F172A !important;
+        border-radius: 50px !important; /* Bentuk Pill (Bulat di ujung) */
+        font-weight: 700 !important;
+        letter-spacing: 0.5px;
+        padding: 0.6rem 2rem !important;
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
         transition: all 0.3s ease !important;
     }
     div[data-testid="stButton"] > button:hover {
-        background-color: #E68310 !important;
-        transform: translateY(-2px) !important;
-        box-shadow: 0 6px 15px rgba(247, 147, 26, 0.35) !important;
+        background-color: #FFFFFF !important;
+        color: #0F172A !important;
+        border: 2px solid #0F172A !important;
+        transform: translateY(-3px) !important;
+        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2) !important;
     }
 
-    /* STYLING TEXT AREA (Glassmorphism & Clean Input) 
-    */
+    /* STYLING TEXT AREA */
     .stTextArea textarea {
-        background-color: rgba(255, 255, 255, 0.8) !important;
-        backdrop-filter: blur(5px);
+        background-color: rgba(255, 255, 255, 0.95) !important;
         color: #0F172A !important;
-        border: 1px solid #CBD5E1 !important;
-        border-radius: 10px !important;
+        border: 2px solid #CBD5E1 !important;
+        border-radius: 12px !important;
         font-size: 1.05rem;
         padding: 1.2rem !important;
-        box-shadow: inset 0 2px 4px rgba(0,0,0,0.02) !important;
+        transition: border-color 0.3s ease;
     }
     .stTextArea textarea:focus {
         border-color: #F7931A !important;
-        box-shadow: 0 0 0 2px rgba(247, 147, 26, 0.3) !important;
+        box-shadow: 0 0 0 3px rgba(247, 147, 26, 0.2) !important;
     }
 
-    /* STYLING METRIK KARTU (Tab Analisis Batch) 
-    */
+    /* STYLING METRIK KARTU */
     div[data-testid="metric-container"] {
         background-color: rgba(255, 255, 255, 0.95) !important;
-        backdrop-filter: blur(10px);
         border: 1px solid #E2E8F0 !important;
-        border-left: 5px solid #F7931A !important; /* Garis Oranye Kiri */
+        border-left: 6px solid #F7931A !important; 
         padding: 1.2rem !important;
         border-radius: 12px !important;
-        box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
-    }
-    div[data-testid="metric-container"] label {
-        color: #64748B !important;
-        font-weight: 500 !important;
+        box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
     }
-    div[data-testid="metric-container"] div {
-        color: #0F172A !important;
-        font-weight: 800 !important;
-    }
-
-    /* Dataframe & Table Modern */
     div[data-testid="stDataFrame"] {
-        background-color: white;
-        border: 1px solid #E2E8F0;
         border-radius: 12px;
-        box-shadow: 0 4px 10px rgba(0,0,0,0.02);
-    }
-    
-    /* Header Typography */
-    h1, h2, h3, h4, h5 {
-        color: #0F172A !important;
-        font-weight: 800 !important;
-        letter-spacing: -0.5px !important;
-    }
-    p, span, label {
-        color: #334155 !important;
+        box-shadow: 0 4px 10px rgba(0,0,0,0.03);
     }
 </style>
 """, unsafe_allow_html=True)
 
 # ==============================
-# HEADER & NAVIGASI (Dibuat ala Navbar Web)
+# CSS BACKGROUND DINAMIS BERDASARKAN TAB
+# ==============================
+if st.session_state.page == "uji_kalimat":
+    st.markdown("""
+    <style>
+        /* Latar Belakang Oranye dengan Efek Blur (Uji Kalimat) */
+        .stApp {
+            background: linear-gradient(135deg, rgba(247, 147, 26, 0.9), rgba(220, 120, 15, 0.8));
+            background-attachment: fixed;
+            position: relative;
+        }
+        .stApp::before {
+            content: "";
+            position: absolute;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.2) 0%, transparent 70%);
+            backdrop-filter: blur(15px);
+            z-index: 0;
+        }
+        /* Menyesuaikan warna teks agar kontras dengan background oranye */
+        .stMarkdown, .stMarkdown h1, .stMarkdown h3, .stMarkdown p {
+            color: #FFFFFF !important;
+            position: relative;
+            z-index: 1;
+        }
+        /* Kecuali untuk box peneliti */
+        .researcher-box p, .researcher-box b {
+            color: #0F172A !important;
+        }
+        /* Navbar logo text */
+        .nav-logo { color: #FFFFFF !important; }
+    </style>
+    """, unsafe_allow_html=True)
+else:
+    st.markdown("""
+    <style>
+        /* Latar Belakang Putih/Terang (Analisis Batch) */
+        .stApp {
+            background-color: #FAFAFC;
+        }
+        .stMarkdown h1, .stMarkdown h2, .stMarkdown h3, .stMarkdown h4 {
+            color: #0F172A !important;
+            font-weight: 800 !important;
+        }
+        .stMarkdown p, .stMarkdown span {
+            color: #334155 !important;
+        }
+        .nav-logo { color: #0F172A !important; }
+    </style>
+    """, unsafe_allow_html=True)
+
+# ==============================
+# HEADER & NAVIGASI
 # ==============================
 def set_page(page_name):
     st.session_state.page = page_name
@@ -157,22 +173,23 @@ st.markdown("<div style='padding-bottom: 0.5rem;'></div>", unsafe_allow_html=Tru
 col_logo, col_space, col_nav1, col_nav2 = st.columns([3, 4, 1.5, 1.5], gap="small")
 
 with col_logo:
-    # Logo text Vancouver Bitcoin style
-    st.markdown("<h3 style='margin:0; padding-top:5px; font-weight:800; color:#0F172A !important;'><span style='color:#F7931A;'>₿itcoin</span> Sentimen</h3>", unsafe_allow_html=True)
+    # Warna teks logo menyesuaikan background tab
+    logo_color = "#FFFFFF" if st.session_state.page == "uji_kalimat" else "#0F172A"
+    st.markdown(f"<h3 style='margin:0; padding-top:5px; font-weight:900; color:{logo_color} !important;'><span style='color:#F7931A;'>₿itcoin</span> Sentimen</h3>", unsafe_allow_html=True)
 
 with col_nav1:
-    if st.button("Uji Kalimat", use_container_width=True, key="nav_uji"):
+    if st.button("📝 Uji Kalimat", use_container_width=True, key="nav_uji"):
         set_page("uji_kalimat")
         st.rerun()
 
 with col_nav2:
-    if st.button("Analisis Batch", use_container_width=True, key="nav_batch"):
+    if st.button("📊 Analisis Batch", use_container_width=True, key="nav_batch"):
         set_page("analisis_batch")
         st.rerun()
 
 # Divider bawah navbar
-st.markdown("<hr style='border: none; height: 1px; background-color: #E2E8F0; margin-top: 10px; margin-bottom: 40px;'>", unsafe_allow_html=True)
-
+divider_color = "rgba(255,255,255,0.3)" if st.session_state.page == "uji_kalimat" else "#E2E8F0"
+st.markdown(f"<hr style='border: none; height: 1px; background-color: {divider_color}; margin-top: 10px; margin-bottom: 40px;'>", unsafe_allow_html=True)
 
 # ==============================
 # DOWNLOAD RESOURCES & LOAD MODELS
@@ -229,22 +246,22 @@ def get_daily_label(score):
 
 
 # ==============================================================================
-# HALAMAN 1: UJI KALIMAT (Mirip Gambar 1 - Tema Terang Oranye)
+# HALAMAN 1: UJI KALIMAT (Background Orange Blur)
 # ==============================================================================
 if st.session_state.page == "uji_kalimat":
     col_text, col_img = st.columns([1.1, 1], gap="large")
     
     with col_text:
         st.markdown("""
-        <div style="padding-top: 1rem;">
-            <h1 style="font-size: 3.5rem; line-height: 1.1; margin-bottom: 1rem; font-weight: 800; letter-spacing: -1.5px; color: #0F172A;">
-                Bitcoin Volatility <br><span style="color: #F7931A;">vs Public Sentiment</span>
+        <div style="padding-top: 1rem; position: relative; z-index: 1;">
+            <h1 style="font-size: 3.8rem; line-height: 1.1; margin-bottom: 1rem; font-weight: 800; letter-spacing: -1.5px;">
+                Bitcoin Volatility <br>vs Public Sentiment
             </h1>
-            <p style='font-size: 1.15rem; font-weight: 400; color: #475569 !important; margin-bottom: 2rem;'>
+            <p style='font-size: 1.15rem; font-weight: 400; margin-bottom: 2rem; opacity: 0.9;'>
                 Analisis Volatilitas Harga Bitcoin Terhadap Sentimen Publik Pada Platform X Berbasis Python.
             </p>
-            <div style="background-color: #FFFFFF; border: 1px solid #E2E8F0; padding: 15px; border-radius: 8px; margin-bottom: 2.5rem; box-shadow: 0 2px 10px rgba(0,0,0,0.02);">
-                <p style="margin: 0; font-size: 0.95rem; color: #334155 !important;">
+            <div class="researcher-box" style="background-color: #FFFFFF; border-left: 5px solid #0F172A; padding: 15px 20px; border-radius: 8px; margin-bottom: 2.5rem; box-shadow: 0 10px 25px rgba(0,0,0,0.1);">
+                <p style="margin: 0; font-size: 0.95rem;">
                     <span style="color: #F7931A;">📌</span> <b>Peneliti:</b> Arya Galuh Saputra (H1D022022)
                 </p>
             </div>
@@ -263,8 +280,8 @@ if st.session_state.page == "uji_kalimat":
             st.info(f"Visualisasi Hero akan muncul di sini. (Pastikan file {os.path.basename(img_hero)} tersedia di folder yang sama)")
 
     if analyze_btn:
-        st.markdown("<br><hr style='border-color: #E2E8F0;'><br>", unsafe_allow_html=True)
-        st.markdown("<h3 style='text-align: center; margin-bottom: 2rem; color: #0F172A;'>📋 Hasil Deteksi Sentimen</h3>", unsafe_allow_html=True)
+        st.markdown("<br><hr style='border-color: rgba(255,255,255,0.3);'><br>", unsafe_allow_html=True)
+        st.markdown("<h3 style='text-align: center; margin-bottom: 2rem;'>📋 Hasil Deteksi Sentimen</h3>", unsafe_allow_html=True)
         
         try:
             if detect(user_input) != 'en':
@@ -305,28 +322,17 @@ if st.session_state.page == "uji_kalimat":
 
 
 # ==============================================================================
-# HALAMAN 2: ANALISIS BATCH DATA (Mirip Gambar 2 - Dashboard Modern)
+# HALAMAN 2: ANALISIS BATCH DATA (Background Putih)
 # ==============================================================================
 elif st.session_state.page == "analisis_batch":
-    # Tema Matplotlib/Seaborn disesuaikan dengan latar terang transparan
-    plt.style.use('default') 
-    sns.set_theme(style="whitegrid", rc={
-        "axes.facecolor": "rgba(255,255,255,0)", 
-        "figure.facecolor": "rgba(255,255,255,0)", 
-        "axes.edgecolor": "#E2E8F0", 
-        "text.color": "#0F172A", 
-        "xtick.color": "#64748B", 
-        "ytick.color": "#64748B",
-        "grid.color": "#F1F5F9"
-    })
 
     col_upload, col_img_batch = st.columns([1.5, 1], gap="large")
             
     with col_upload:
         st.markdown("""
         <div style="padding-top: 1rem;">
-            <h2 style="font-size: 2.5rem; margin-bottom: 0.5rem; font-weight: 800; letter-spacing: -1px; color: #0F172A;">Analisis Batch Data</h2>
-            <p style='font-size: 1.1rem; color: #475569 !important; margin-bottom: 1.5rem;'>Unggah file rekam jejak tweet (.txt) untuk diekstraksi dan dianalisis secara masal terhadap volatilitas pasar.</p>
+            <h2 style="font-size: 2.8rem; margin-bottom: 0.5rem; font-weight: 800; letter-spacing: -1px;">Analisis Batch Data</h2>
+            <p style='font-size: 1.1rem; margin-bottom: 1.5rem;'>Unggah file rekam jejak tweet (.txt) untuk diekstraksi dan dianalisis secara masal terhadap volatilitas pasar.</p>
         </div>
         """, unsafe_allow_html=True)
         
@@ -413,7 +419,6 @@ elif st.session_state.page == "analisis_batch":
         if df.empty:
             st.error("❌ Data kosong. Pastikan format penulisan TXT benar dan tweet berbahasa Inggris.")
         else:
-            # Metrics Dashboard
             st.markdown("<h3 style='margin-bottom: 1.5rem;'>📊 Ringkasan Pemrosesan</h3>", unsafe_allow_html=True)
             col_metric1, col_metric2, col_metric3 = st.columns(3)
             col_metric1.metric("Tweet Berhasil Diproses", f"{total_tweets_uploaded}", border=False)
@@ -486,7 +491,6 @@ elif st.session_state.page == "analisis_batch":
                             final_display_cols = ["date", "price", "pct_change", "log_return"] + [c for c in daily_display_cols if c != "date"]
                             st.dataframe(df_merged[final_display_cols], use_container_width=True, hide_index=True)
 
-                            # Tombol Download
                             col_dl1, col_dl2, _ = st.columns([1, 1, 3])
                             csv_data = df_merged.to_csv(index=False).encode('utf-8')
                             col_dl1.download_button("📥 Unduh CSV", data=csv_data, file_name="sentiment_volatility.csv", mime="text/csv", use_container_width=True)
@@ -498,7 +502,6 @@ elif st.session_state.page == "analisis_batch":
 
                             st.markdown("<hr style='border-color: #E2E8F0; margin: 3rem 0;'>", unsafe_allow_html=True)
 
-                            # UJI KORELASI PEARSON
                             st.subheader("🔬 Uji Korelasi Pearson")
                             st.caption("Menganalisis hubungan statistik antara skor sentimen harian dan volatilitas log-return BTC.")
                             
@@ -521,24 +524,37 @@ elif st.session_state.page == "analisis_batch":
                                 
                             st.table(pd.DataFrame(corr_data))
 
-                            # LINE CHART 
+                            # ==============================
+                            # PLOTLY INTERAKTIF (Bebas Error)
+                            # ==============================
                             st.markdown("<br>", unsafe_allow_html=True)
                             st.subheader("📈 Trend Analisis: Sentiment vs BTC Volatility")
                             
-                            fig_line, ax_line = plt.subplots(figsize=(14, 6))
-                            
-                            ax_line.plot(df_merged["date"], df_merged["log_return"], label="BTC Log Return", color="#F7931A", linewidth=3, linestyle="-")
-                            
+                            fig_line = go.Figure()
+
+                            fig_line.add_trace(go.Scatter(
+                                x=df_merged["date"], y=df_merged["log_return"],
+                                mode='lines', name='BTC Log Return',
+                                line=dict(color='#F7931A', width=3)
+                            ))
+
                             colors = ["#3B82F6", "#10B981", "#EC4899", "#14B8A6", "#6366F1"]
                             for idx, method in enumerate(["vader", "textblob", "roberta", "roberta_large", "bertweet"]):
-                                ax_line.plot(df_merged["date"], df_merged[method], label=f"Sentiment: {method.upper()}", color=colors[idx], linewidth=1.5, linestyle="--", alpha=0.8)
-                            
-                            ax_line.set_title("Pergerakan Sentimen vs Log Return Bitcoin", fontsize=14, pad=15, fontweight='bold')
-                            ax_line.set_xlabel("Tanggal", fontsize=11)
-                            ax_line.set_ylabel("Nilai Metrik", fontsize=11)
-                            ax_line.legend(loc='upper left', bbox_to_anchor=(1, 1), frameon=True)
-                            plt.tight_layout()
-                            st.pyplot(fig_line)
+                                fig_line.add_trace(go.Scatter(
+                                    x=df_merged["date"], y=df_merged[method],
+                                    mode='lines', name=f"Sentiment: {method.upper()}",
+                                    line=dict(color=colors[idx], width=1.5, dash='dash'), opacity=0.8
+                                ))
+
+                            fig_line.update_layout(
+                                title="Pergerakan Sentimen vs Log Return Bitcoin",
+                                hovermode="x unified",
+                                legend=dict(orientation="h", yanchor="bottom", y=1.02, xanchor="right", x=1),
+                                plot_bgcolor='rgba(255,255,255,0)',
+                                xaxis=dict(showgrid=True, gridcolor='#F1F5F9'),
+                                yaxis=dict(showgrid=True, gridcolor='#F1F5F9')
+                            )
+                            st.plotly_chart(fig_line, use_container_width=True)
 
                             # SCATTER PLOT
                             st.markdown("<br>### 🔵 Pola Distribusi Scatter", unsafe_allow_html=True)
@@ -548,17 +564,23 @@ elif st.session_state.page == "analisis_batch":
                             
                             for idx, method in enumerate(models_list):
                                 with cols[idx % 3]:
-                                    fig_scatter, ax_scatter = plt.subplots(figsize=(5, 4))
-                                    sns.regplot(data=df_merged, x=method, y="log_return", ax=ax_scatter, 
-                                                scatter_kws={"s": 40, "color": "#0F172A", "alpha": 0.5}, 
-                                                line_kws={"color": "#F7931A", "linewidth": 2})
-                                    ax_scatter.set_title(f"{method.upper()}", fontweight='bold')
-                                    ax_scatter.set_xlabel("Sentimen Score")
-                                    ax_scatter.set_ylabel("Log Return")
-                                    plt.tight_layout()
-                                    st.pyplot(fig_scatter)
+                                    fig_scatter = px.scatter(
+                                        df_merged, x=method, y="log_return",
+                                        trendline="ols", title=f"{method.upper()}",
+                                        color_discrete_sequence=["#0F172A"]
+                                    )
+                                    if len(fig_scatter.data) > 1:
+                                        fig_scatter.data[1].line.color = "#F7931A"
+                                        fig_scatter.data[1].line.width = 2
+                                    
+                                    fig_scatter.update_layout(
+                                        plot_bgcolor='rgba(255,255,255,0)',
+                                        xaxis=dict(showgrid=True, gridcolor='#F1F5F9'),
+                                        yaxis=dict(showgrid=True, gridcolor='#F1F5F9'),
+                                        margin=dict(l=0, r=0, t=40, b=0)
+                                    )
+                                    st.plotly_chart(fig_scatter, use_container_width=True)
                             
-                            # KESIMPULAN
                             st.markdown("<hr style='border-color: #E2E8F0; margin: 3rem 0;'>", unsafe_allow_html=True)
                             st.subheader("📝 Kesimpulan Otomatis")