Update src/streamlit_app.py

src/streamlit_app.py

@@ -28,115 +28,142 @@ img_hero = os.path.join(BASE_DIR, "crypto-currency-concept-830px.png")
 img_batch = os.path.join(BASE_DIR, "slice3-1-1536x830.png")
 
 # ==============================
-# KONFIGURASI HALAMAN & TEMA
+# KONFIGURASI HALAMAN & STATE NAVIGASI
 # ==============================
 st.set_page_config(page_title="SKRIPSI - BTS", page_icon="₿", layout="wide")
 
-st.markdown("""
-<style>
-    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
-
-    :root {
-        --bitcoin-orange: #F7931A;
-        --bitcoin-orange-hover: #E8830C;
-        --bg-main: #0B0E14;       
-        --bg-secondary: #151A22;  
-        --text-dark: #FFFFFF;     
-        --text-muted: #9CA3AF;    
-        --border-color: #2D3748;  
-    }
+if 'page' not in st.session_state:
+    st.session_state.page = "uji_kalimat"
 
-    .stApp {
-        background-color: var(--bg-main);
-        color: var(--text-dark);
-        font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-    }
-
-    h1, h2, h3, h4, h5, h6 {
-        color: var(--text-dark) !important;
-        font-family: 'Inter', sans-serif !important;
-        font-weight: 700 !important;
-        letter-spacing: -0.5px;
-    }
+# ==============================
+# INJEKSI CSS DINAMIS (TEMA HALAMAN)
+# ==============================
+if st.session_state.page == "uji_kalimat":
+    # TEMA ORANYE (Mirip Vancouver Bitcoin Landing Page)
+    st.markdown("""
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+        
+        .stApp {
+            background-color: #F38220; /* Oranye */
+            color: #FFFFFF;
+            font-family: 'Inter', sans-serif;
+        }
+        
+        h1, h2, h3, h4, h5, h6, p, span, label {
+            color: #FFFFFF !important;
+        }
+        
+        /* Styling Text Area & Inputs agar kontras di latar oranye */
+        .stTextArea textarea {
+            background-color: #FFFFFF;
+            color: #111827 !important;
+            border-radius: 8px;
+        }
+        
+        /* Tombol Aksi */
+        .action-btn > button {
+            background-color: #1E1E24;
+            color: #FFFFFF !important;
+            border: none;
+            border-radius: 25px;
+            padding: 0.6rem 2rem;
+            font-weight: 600;
+        }
+        .action-btn > button:hover {
+            background-color: #33333C;
+        }
+    </style>
+    """, unsafe_allow_html=True)
     
-    .btc-highlight {
-        color: var(--bitcoin-orange);
-    }
-
-    div.stButton > button:first-child {
-        background-color: var(--bitcoin-orange);
-        color: #ffffff;
-        border: none;
-        border-radius: 4px;
-        padding: 0.6rem 1.5rem;
-        font-weight: 600;
-        font-family: 'Inter', sans-serif;
-        letter-spacing: 0.5px;
-        text-transform: uppercase;
-        transition: all 0.2s ease-in-out;
-        box-shadow: 0 2px 4px rgba(247, 147, 26, 0.2);
-    }
-    div.stButton > button:first-child:hover {
-        background-color: var(--bitcoin-orange-hover);
-        box-shadow: 0 4px 8px rgba(247, 147, 26, 0.4);
-        transform: translateY(-1px);
-        color: #ffffff;
-    }
-
-    .stTabs [data-baseweb="tab-list"] {
-        gap: 30px;
-        border-bottom: 2px solid var(--border-color);
-    }
-    .stTabs [data-baseweb="tab"] {
-        height: 55px;
-        white-space: pre-wrap;
-        background-color: transparent;
-        border-radius: 0px;
-        color: var(--text-muted);
-        font-weight: 500;
-        font-size: 1.05rem;
-        padding-top: 10px;
-        padding-bottom: 10px;
-    }
-    .stTabs [aria-selected="true"] {
-        border-bottom: 3px solid var(--bitcoin-orange) !important;
-        color: var(--text-dark) !important;
-        font-weight: 700;
-    }
+else:
+    # TEMA PUTIH/KREM (Mirip Vancouver Bitcoin Info Page)
+    st.markdown("""
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+        
+        .stApp {
+            background-color: #FFFDF5; /* Krem / Putih Gading */
+            color: #111827;
+            font-family: 'Inter', sans-serif;
+        }
+        
+        h1, h2, h3, h4, h5, h6, label {
+            color: #111827 !important;
+        }
+        
+        p, span {
+            color: #4B5563 !important;
+        }
+        
+        hr { border-color: #E5E7EB; }
+        
+        /* Tombol Aksi */
+        .action-btn > button {
+            background-color: #312E81;
+            color: #FFFFFF !important;
+            border: none;
+            border-radius: 25px;
+            padding: 0.6rem 2rem;
+            font-weight: 600;
+        }
+        .action-btn > button:hover {
+            background-color: #4338CA;
+        }
+        
+        /* Expander Header Text */
+        .streamlit-expanderHeader { color: #111827 !important; }
+    </style>
+    """, unsafe_allow_html=True)
 
-    .streamlit-expanderHeader {
-        font-weight: 600;
-        color: var(--text-dark);
-        background-color: var(--bg-secondary);
-        border-radius: 6px;
-    }
-    
-    [data-testid="stMetricValue"] {
-        color: var(--bitcoin-orange);
-        font-weight: 700;
+# CSS Global untuk Navigasi (Tetap sama di kedua tema)
+st.markdown("""
+<style>
+    .nav-container {
+        padding: 10px 0;
+        border-bottom: 2px solid rgba(255, 255, 255, 0.2);
+        margin-bottom: 20px;
     }
-    [data-testid="stMetricLabel"] {
-        color: var(--text-muted);
-        font-weight: 600;
+    .nav-btn > button {
+        background-color: transparent !important;
+        border: 2px solid currentColor !important;
+        border-radius: 20px !important;
+        font-weight: 600 !important;
+        transition: all 0.3s ease;
     }
-
-    hr {
-        border-color: var(--border-color);
-        margin: 2rem 0;
+    .nav-btn > button:hover {
+        opacity: 0.8;
+        transform: translateY(-2px);
     }
 </style>
 """, unsafe_allow_html=True)
 
-plt.style.use('dark_background') 
-sns.set_theme(style="darkgrid", rc={
-    "axes.facecolor": "#151A22", 
-    "figure.facecolor": "#0B0E14", 
-    "axes.edgecolor": "#2D3748", 
-    "text.color": "#FFFFFF", 
-    "xtick.color": "#9CA3AF", 
-    "ytick.color": "#9CA3AF",
-    "grid.color": "#2D3748"
-})
+# ==============================
+# FUNGSI NAVIGASI
+# ==============================
+def set_page(page_name):
+    st.session_state.page = page_name
+
+# Header Navigasi (Sistem Berpindah Halaman)
+col_logo, col_nav1, col_nav2, col_space = st.columns([2, 1.5, 1.5, 4])
+with col_logo:
+    st.markdown("<h3 style='margin:0; padding:0;'>₿itcoin Sentimen</h3>", unsafe_allow_html=True)
+
+with col_nav1:
+    st.markdown('<div class="nav-btn">', unsafe_allow_html=True)
+    if st.button("Uji Kalimat 📝", use_container_width=True):
+        set_page("uji_kalimat")
+        st.rerun()
+    st.markdown('</div>', unsafe_allow_html=True)
+
+with col_nav2:
+    st.markdown('<div class="nav-btn">', unsafe_allow_html=True)
+    if st.button("Analisis Batch 📊", use_container_width=True):
+        set_page("analisis_batch")
+        st.rerun()
+    st.markdown('</div>', unsafe_allow_html=True)
+
+st.markdown("<div style='margin-bottom: 40px;'></div>", unsafe_allow_html=True)
 
 # ==============================
 # DOWNLOAD REQUIRED RESOURCES
@@ -194,28 +221,18 @@ def get_daily_label(score):
     elif score < -0.05: return 'Negative'
     else: return 'Neutral'
 
-# ==============================
-# UI UTAMA STREAMLIT
-# ==============================
-st.markdown("<br>", unsafe_allow_html=True)
-
-tab1, tab2 = st.tabs(["🧪 Uji Kalimat", "📊 Analisis Batch Data"])
-
-# ==============================
-# TAB 1: UJI KALIMAT (Layout Web Hero)
-# ==============================
-with tab1:
-    st.markdown("<br>", unsafe_allow_html=True)
-    
-    # Kolom teks & input di Kiri, Gambar di Kanan
+# ==============================================================================
+# HALAMAN 1: UJI KALIMAT (BACKGROUND ORANYE)
+# ==============================================================================
+if st.session_state.page == "uji_kalimat":
     col_text, col_img = st.columns([1.2, 1], gap="large")
     
     with col_text:
         st.markdown("""
         <div style="padding-top: 0.5rem;">
-            <h1 style="font-size: 2.8rem; line-height: 1.2; margin-bottom: 1rem;"><span class="btc-highlight">₿</span>itcoin Volatility vs Public Sentiment</h1>
-            <p style='color: #9CA3AF; font-size: 1.15rem; font-weight: 500;'>Analisis Volatilitas Harga Bitcoin Terhadap Sentimen Publik Pada Platform X Berbasis Python</p>
-            <p style='color: #6B7280; font-size: 0.95rem; margin-top: 1.5rem; margin-bottom: 2rem; border-left: 4px solid var(--bitcoin-orange); padding-left: 10px;'>
+            <h1 style="font-size: 3rem; line-height: 1.2; margin-bottom: 1rem; color: white;">Bitcoin Volatility vs Public Sentiment</h1>
+            <p style='font-size: 1.15rem; font-weight: 500;'>Analisis Volatilitas Harga Bitcoin Terhadap Sentimen Publik Pada Platform X Berbasis Python</p>
+            <p style='font-size: 0.95rem; margin-top: 1.5rem; margin-bottom: 2rem; border-left: 4px solid white; padding-left: 10px;'>
                 <b>Peneliti:</b> Arya Galuh Saputra (H1D022022)
             </p>
         </div>
@@ -223,12 +240,9 @@ with tab1:
         
         user_input = st.text_area("Masukkan Tweet (Bahasa Inggris):", "Great, Bitcoin just crashed another 10% today.", height=130)
         
-        col_btn, col_info = st.columns([1, 1.2])
-        with col_btn:
-            analyze_btn = st.button("🚀 Analisis Sentimen", use_container_width=True)
-        with col_info:
-            with st.expander("ℹ️ Info Model NLP"):
-                st.caption("5 Metode: VADER, TextBlob, BERTweet, RoBERTa, dan RoBERTa Large.")
+        st.markdown('<div class="action-btn">', unsafe_allow_html=True)
+        analyze_btn = st.button("🚀 Analisis Sentimen", use_container_width=True)
+        st.markdown('</div>', unsafe_allow_html=True)
                 
     with col_img:
         try:
@@ -236,7 +250,6 @@ with tab1:
         except Exception as e:
             st.error(f"⏳ Menunggu gambar diunggah... (Pastikan file {img_hero} tersedia)")
 
-    # Menampilkan hasil di bawahnya secara full width jika tombol ditekan
     if analyze_btn:
         st.markdown("<hr>", unsafe_allow_html=True)
         st.subheader("📋 Hasil Deteksi Sentimen")
@@ -277,13 +290,23 @@ with tab1:
             }
             st.dataframe(pd.DataFrame(data_test), use_container_width=True, hide_index=True)
 
-# ==============================
-# TAB 2: ANALISIS BATCH (Layout Web Informasi)
-# ==============================
-with tab2:
-    st.markdown("<br>", unsafe_allow_html=True)
-    
-    # Gambar Monitor di Kiri, Form Upload di Kanan
+
+# ==============================================================================
+# HALAMAN 2: ANALISIS BATCH DATA (BACKGROUND PUTIH/KREM)
+# ==============================================================================
+elif st.session_state.page == "analisis_batch":
+    # Ubah tema grafik matplotlib agar sesuai dengan background terang
+    plt.style.use('default') 
+    sns.set_theme(style="whitegrid", rc={
+        "axes.facecolor": "#FFFFFF", 
+        "figure.facecolor": "#FFFDF5", 
+        "axes.edgecolor": "#E5E7EB", 
+        "text.color": "#111827", 
+        "xtick.color": "#4B5563", 
+        "ytick.color": "#4B5563",
+        "grid.color": "#F3F4F6"
+    })
+
     col_img_batch, col_upload = st.columns([1, 1.5], gap="large")
     
     with col_img_batch:
@@ -295,8 +318,8 @@ with tab2:
     with col_upload:
         st.markdown("""
         <div style="padding-top: 1.5rem;">
-            <h2 style="font-size: 2.3rem; margin-bottom: 0.5rem; color: #FFFFFF;">📂 Analisis Batch Data</h2>
-            <p style='color: #9CA3AF; font-size: 1.1rem; margin-bottom: 1.5rem;'>Unggah file ekstensi .txt yang berisi history tweet untuk dianalisis secara masal.</p>
+            <h2 style="font-size: 2.5rem; margin-bottom: 0.5rem; color: #111827;">📂 Analisis Batch Data</h2>
+            <p style='font-size: 1.1rem; margin-bottom: 1.5rem;'>Unggah file ekstensi .txt yang berisi history tweet untuk dianalisis secara masal.</p>
         </div>
         """, unsafe_allow_html=True)
         
@@ -305,9 +328,10 @@ with tab2:
         with st.expander("📌 Lihat Format TXT yang Benar"):
             st.code("username | 2024-03-01 14:00:00\nIsi tweet baris pertama di sini\n\nusername2 | 2024-03-01 15:30:00\nIsi tweet baris kedua di sini", language="text")
 
+        st.markdown('<div class="action-btn">', unsafe_allow_html=True)
         analyze_batch_btn = st.button("⚙️ Eksekusi Analisis", key="batch_btn")
+        st.markdown('</div>', unsafe_allow_html=True)
 
-    # Bagian pemrosesan data, dieksekusi secara full-width di bawah layout gambar & form
     if tweet_files and analyze_batch_btn:
         st.markdown("---")
         tweet_files = sorted(tweet_files, key=lambda x: x.name)
@@ -325,12 +349,10 @@ with tab2:
             
             for tweet in tweets:
                 parts = tweet.strip().split("\n", 1)
-                if len(parts) != 2:
-                    continue
+                if len(parts) != 2: continue
                 
                 meta, text_raw = parts
                 
-                # FILTER BAHASA INGGRIS
                 try:
                     DetectorFactory.seed = 0 
                     lang = detect(text_raw)
@@ -392,11 +414,7 @@ with tab2:
             st.info("📡 Mengambil data harga Bitcoin dari CoinGecko API...")
             
             url = "https://api.coingecko.com/api/v3/coins/bitcoin/market_chart/range"
-            params = {
-                "vs_currency": "usd",
-                "from": start_unix,
-                "to": end_unix
-            }
+            params = {"vs_currency": "usd", "from": start_unix, "to": end_unix}
             headers = {"accept": "application/json", "User-Agent": "Mozilla/5.0"}
             
             try:
@@ -427,13 +445,11 @@ with tab2:
                             st.markdown("---")
                             st.header("📋 Ringkasan Data")
                             
-                            # TABEL 1: SENTIMEN MENTAH
                             st.markdown("#### 🗣️ Data Sentimen Mentah")
                             st.caption("Tweet asli, hasil preprocessing, dan label prediksi dari 5 model sebelum konversi ke numerik.")
                             raw_display_cols = ["date", "raw_tweet", "cleaned_tweet", "vader", "textblob", "bertweet", "roberta", "roberta_large"]
                             st.dataframe(df[raw_display_cols], use_container_width=True, hide_index=True)
 
-                            # KONVERSI LABEL SENTIMEN KE ANGKA
                             sentiment_map = {"positive": 1, "neutral": 0, "negative": -1}
                             df_score = df.copy()
                             for col in ["vader", "textblob", "bertweet", "roberta", "roberta_large"]:
@@ -450,19 +466,16 @@ with tab2:
                             for col in models:
                                 daily_display_cols.extend([col, f"{col}_label"])
 
-                            # TABEL 2: SKOR SENTIMEN HARIAN
                             st.markdown("<br>", unsafe_allow_html=True)
                             st.markdown("#### 🔢 Skor Sentimen Harian")
                             st.caption("Rata-rata skor sentimen harian yang dikonversi ke representasi metrik.")
                             st.dataframe(df_sentiment_daily[daily_display_cols], use_container_width=True, hide_index=True)
 
-                            # TABEL 3: HARGA BITCOIN
                             st.markdown("<br>", unsafe_allow_html=True)
                             st.markdown("#### ₿ Historis Harga & Volatilitas Bitcoin")
                             st.caption("Data pergerakan rata-rata harga, persentase perubahan, dan Log Return (CoinGecko API).")
                             st.dataframe(df_price[["date", "price", "pct_change", "log_return"]], use_container_width=True, hide_index=True)
 
-                            # MERGE KEDUA TABEL
                             df_merged = pd.merge(df_price, df_sentiment_daily, on="date", how="inner")
 
                             st.markdown("---")
@@ -470,7 +483,6 @@ with tab2:
                             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)
 
-                            # Export Buttons
                             col_dl1, col_dl2, _ = st.columns([1, 1, 2])
                             csv_data = df_merged.to_csv(index=False).encode('utf-8')
                             col_dl1.download_button("📥 Download CSV", data=csv_data, file_name="sentiment_volatility.csv", mime="text/csv")
@@ -482,9 +494,7 @@ with tab2:
 
                             st.markdown("---")
 
-                            # ==============================
                             # UJI KORELASI PEARSON
-                            # ==============================
                             st.subheader("🔬 Uji Korelasi Pearson (Sentiment vs Log Return)")
                             
                             with st.expander("💡 Dasar Pengambilan Keputusan"):
@@ -507,17 +517,11 @@ with tab2:
                                     "Status": signifikansi
                                 })
                                 
-                                raw_corr_results.append({
-                                    "metode": method.upper(),
-                                    "r": corr,
-                                    "p": pval
-                                })
+                                raw_corr_results.append({"metode": method.upper(), "r": corr, "p": pval})
                                 
                             st.table(pd.DataFrame(corr_data))
 
-                            # ==============================
                             # LINE CHART 
-                            # ==============================
                             st.markdown("---")
                             st.subheader("📈 Trend Analisis: Sentiment vs BTC Volatility")
                             
@@ -529,16 +533,14 @@ with tab2:
                             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 Rata-Rata Sentimen Harian Terhadap Volatilitas Harga Bitcoin", color="#FFFFFF", fontsize=14, pad=15, fontweight='bold')
-                            ax_line.set_xlabel("Tanggal", color="#9CA3AF", fontsize=11)
-                            ax_line.set_ylabel("Nilai (Value)", color="#9CA3AF", fontsize=11)
-                            ax_line.legend(loc='upper left', bbox_to_anchor=(1, 1), frameon=True, facecolor='#151A22', edgecolor='#2D3748')
+                            ax_line.set_title("Pergerakan Rata-Rata Sentimen Harian Terhadap Volatilitas Harga Bitcoin", color="#111827", fontsize=14, pad=15, fontweight='bold')
+                            ax_line.set_xlabel("Tanggal", color="#4B5563", fontsize=11)
+                            ax_line.set_ylabel("Nilai (Value)", color="#4B5563", fontsize=11)
+                            ax_line.legend(loc='upper left', bbox_to_anchor=(1, 1), frameon=True, facecolor='#FFFFFF', edgecolor='#E5E7EB')
                             plt.tight_layout()
                             st.pyplot(fig_line)
 
-                            # ==============================
-                            # SCATTER PLOT + TRENDLINE
-                            # ==============================
+                            # SCATTER PLOT
                             st.markdown("---")
                             st.subheader("🔵 Pola Distribusi (Scatter Plot & Trendline)")
                             
@@ -551,9 +553,9 @@ with tab2:
                                     sns.regplot(data=df_merged, x=method, y="log_return", ax=ax_scatter, 
                                                 scatter_kws={"s": 50, "color": "#4F46E5", "alpha": 0.6}, 
                                                 line_kws={"color": "#F7931A", "linewidth": 2.5})
-                                    ax_scatter.set_title(f"{method.upper()} vs Log Return", color="#FFFFFF", fontweight='bold')
-                                    ax_scatter.set_xlabel("Skor Sentimen", color="#9CA3AF")
-                                    ax_scatter.set_ylabel("Log Return", color="#9CA3AF")
+                                    ax_scatter.set_title(f"{method.upper()} vs Log Return", color="#111827", fontweight='bold')
+                                    ax_scatter.set_xlabel("Skor Sentimen", color="#4B5563")
+                                    ax_scatter.set_ylabel("Log Return", color="#4B5563")
                                     plt.tight_layout()
                                     st.pyplot(fig_scatter)
                             
@@ -561,9 +563,7 @@ with tab2:
                                 st.write("- **Garis Orange (Trendline):** Menunjukkan arah korelasi (Naik = Positif, Turun = Negatif).")
                                 st.write("- **Titik Ungu:** Sebaran data, semakin merapat ke garis orange berarti korelasi semakin kuat.")
 
-                            # ==============================
-                            # KESIMPULAN & PEMBAHASAN AKHIR
-                            # ==============================
+                            # KESIMPULAN
                             st.markdown("---")
                             st.header("📝 Ekstraksi Kesimpulan")