Update src/streamlit_app.py

src/streamlit_app.py

@@ -23,75 +23,118 @@ DetectorFactory.seed = 0
 # ==============================
 st.set_page_config(page_title="SKRIPSI - Sentiment & Volatility", page_icon="₿", layout="wide")
 
-# Custom CSS untuk Tema Minimalis, Tech & Bitcoin
+# Custom CSS ala "Vancouver Bitcoin" (Clean, Light, Professional, Bitcoin Orange Accents)
 st.markdown("""
 <style>
+    /* Konfigurasi Palet Warna */
     :root {
         --bitcoin-orange: #F7931A;
-        --dark-bg: #0d1117;
-        --panel-bg: #161b22;
-        --text-color: #c9d1d9;
+        --bitcoin-orange-hover: #E8830C;
+        --bg-main: #ffffff;
+        --bg-secondary: #f8f9fa;
+        --text-dark: #111827;
+        --text-muted: #6b7280;
+        --border-color: #e5e7eb;
     }
-    /* Mengubah warna teks header */
+
+    /* Memaksa Tampilan Light Mode */
+    .stApp {
+        background-color: var(--bg-main);
+        color: var(--text-dark);
+        font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+    }
+
+    /* Mengubah warna teks header utama */
     h1, h2, h3, h4, h5, h6 {
-        color: var(--bitcoin-orange) !important;
-        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        color: var(--text-dark) !important;
+        font-weight: 700 !important;
+        letter-spacing: -0.5px;
     }
-    /* Styling tombol */
+    
+    /* Highlight spesifik untuk teks Bitcoin */
+    .btc-highlight {
+        color: var(--bitcoin-orange);
+    }
+
+    /* Styling Tombol ala Vancouver Bitcoin */
     div.stButton > button:first-child {
         background-color: var(--bitcoin-orange);
         color: #ffffff;
         border: none;
-        border-radius: 6px;
-        padding: 0.5rem 1rem;
-        font-weight: bold;
-        transition: all 0.3s ease;
+        border-radius: 4px;
+        padding: 0.6rem 1.5rem;
+        font-weight: 600;
+        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: #d97b14;
-        box-shadow: 0 0 12px rgba(247, 147, 26, 0.4);
-        transform: translateY(-2px);
+        background-color: var(--bitcoin-orange-hover);
+        box-shadow: 0 4px 8px rgba(247, 147, 26, 0.4);
+        transform: translateY(-1px);
+        color: #ffffff;
     }
-    /* Styling Tabs */
+
+    /* Styling Tabs yang Elegan */
     .stTabs [data-baseweb="tab-list"] {
-        gap: 20px;
+        gap: 30px;
+        border-bottom: 2px solid var(--border-color);
     }
     .stTabs [data-baseweb="tab"] {
-        height: 50px;
+        height: 55px;
         white-space: pre-wrap;
         background-color: transparent;
-        border-radius: 4px 4px 0px 0px;
-        gap: 10px;
+        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(--bitcoin-orange) !important;
-        font-weight: bold;
+        color: var(--text-dark) !important;
+        font-weight: 700;
     }
-    /* Expander & Markdown */
+
+    /* Expander & Accordion */
     .streamlit-expanderHeader {
-        font-weight: bold;
+        font-weight: 600;
+        color: var(--text-dark);
+        background-color: var(--bg-secondary);
+        border-radius: 6px;
     }
-    /* Info/Warning/Success Banners styling */
-    .stAlert {
-        border-radius: 8px;
+    
+    /* Metrics / Data Cards */
+    [data-testid="stMetricValue"] {
+        color: var(--bitcoin-orange);
+        font-weight: 700;
+    }
+    [data-testid="stMetricLabel"] {
+        color: var(--text-muted);
+        font-weight: 600;
+    }
+
+    /* Custom divider */
+    hr {
+        border-color: var(--border-color);
+        margin: 2rem 0;
     }
 </style>
 """, unsafe_allow_html=True)
 
-# Styling Grafik Seaborn & Matplotlib agar sesuai tema Tech/Dark
-sns.set_theme(style="darkgrid", rc={
-    "axes.facecolor": "#161b22", 
-    "figure.facecolor": "#0d1117", 
-    "axes.edgecolor": "#30363d", 
-    "text.color": "#c9d1d9", 
-    "xtick.color": "#c9d1d9", 
-    "ytick.color": "#c9d1d9",
-    "grid.color": "#30363d"
+# Styling Grafik Seaborn & Matplotlib agar sesuai tema Terang/Finansial
+sns.set_theme(style="whitegrid", rc={
+    "axes.facecolor": "#ffffff", 
+    "figure.facecolor": "#ffffff", 
+    "axes.edgecolor": "#e5e7eb", 
+    "text.color": "#111827", 
+    "xtick.color": "#4b5563", 
+    "ytick.color": "#4b5563",
+    "grid.color": "#f3f4f6"
 })
-plt.style.use('dark_background')
+plt.style.use('default') 
 
 # ==============================
 # DOWNLOAD REQUIRED RESOURCES
@@ -153,11 +196,31 @@ def get_daily_label(score):
     else: return 'Neutral'
 
 # ==============================
-# UI UTAMA STREAMLIT
+# UI UTAMA STREAMLIT (HERO BANNER)
 # ==============================
-st.markdown("<h1 style='text-align: center;'>₿itcoin Volatility vs Public Sentiment</h1>", unsafe_allow_html=True)
-st.markdown("<p style='text-align: center; color: #8b949e;'>Analisis Volatilitas Harga Bitcoin Terhadap Sentimen Publik Pada Platform X Berbasis Python<br><b>Peneliti:</b> Arya Galuh Saputra (H1D022022)</p>", unsafe_allow_html=True)
-st.markdown("---")
+st.markdown("<br>", unsafe_allow_html=True)
+
+# Layout 2 kolom: Kiri untuk teks judul, Kanan untuk gambar dompet 3D
+hero_col1, hero_col2 = st.columns([1.2, 1], gap="large")
+
+with hero_col1:
+    st.markdown("""
+    <div style="padding-top: 1rem;">
+        <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: #4b5563; font-size: 1.15rem; font-weight: 500;'>Analisis Volatilitas Harga Bitcoin Terhadap Sentimen Publik Pada Platform X Berbasis Python</p>
+        <p style='color: #9ca3af; font-size: 0.95rem; margin-top: 1.5rem; border-left: 4px solid var(--bitcoin-orange); padding-left: 10px;'>
+            <b>Peneliti:</b> Arya Galuh Saputra (H1D022022)
+        </p>
+    </div>
+    """, unsafe_allow_html=True)
+
+with hero_col2:
+    try:
+        st.image("crypto-currency-concept-830px.png", use_container_width=True)
+    except Exception:
+        st.info("⏳ Menunggu gambar crypto-currency-concept-830px.png diunggah ke Hugging Face...")
+
+st.markdown("<br>", unsafe_allow_html=True)
 
 tab1, tab2 = st.tabs(["🧪 Uji Kalimat (Playground)", "📊 Analisis Batch Data (Pipeline)"])
 
@@ -165,7 +228,8 @@ tab1, tab2 = st.tabs(["🧪 Uji Kalimat (Playground)", "📊 Analisis Batch Data
 # TAB 1: UJI KALIMAT
 # ==============================
 with tab1:
-    col1, col2 = st.columns([1, 1])
+    st.markdown("<br>", unsafe_allow_html=True)
+    col1, col2 = st.columns([1, 1], gap="large")
     
     with col1:
         st.subheader("Input Data")
@@ -204,7 +268,6 @@ with tab1:
                 try: rl_label = roberta_large(text)[0]['label'].lower()
                 except: rl_label = "neutral"
 
-                # Formatting label untuk tampilan yang lebih menarik
                 def format_label(label):
                     if label == 'positive': return "🟢 Positive"
                     elif label == 'negative': return "🔴 Negative"
@@ -220,12 +283,22 @@ with tab1:
 # TAB 2: ANALISIS BATCH
 # ==============================
 with tab2:
-    st.subheader("📂 Upload Dataset Sentimen")
-    col_upload, col_format = st.columns([2, 1])
+    st.markdown("<br>", unsafe_allow_html=True)
+    
+    # Layout 2 kolom: Kiri untuk gambar ilustrasi dashboard, Kanan untuk file uploader
+    col_img, col_upload = st.columns([1, 1.5], gap="large")
     
+    with col_img:
+        try:
+            st.image("slice3-1-1536x830.png", use_container_width=True)
+        except Exception:
+            st.empty() 
+            
     with col_upload:
+        st.subheader("📂 Upload Dataset Sentimen")
+        st.markdown("<p style='color: #6b7280;'>Unggah file ekstensi .txt yang berisi history tweet untuk dianalisis secara masal.</p>", unsafe_allow_html=True)
         tweet_files = st.file_uploader("Pilih file Tweet (.txt)", type=['txt'], accept_multiple_files=True)
-    with col_format:
+        
         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")
 
@@ -346,14 +419,13 @@ with tab2:
                             st.warning("⚠️ Data Harga API kosong setelah di-filter. Pastikan format penulisan tanggal di .txt sesuai (yyyy-mm-dd).")
                         else:
                             st.markdown("---")
-                            st.subheader("📋 Ringkasan Data (Tabel Terintegrasi)")
-                            
-                            t1, t2, t3 = st.tabs(["🗣️ Sentimen Mentah", "🔢 Agregasi Sentimen Harian", "₿ Data Harga Bitcoin"])
+                            st.header("📋 Ringkasan Data Pembentuk Pipeline")
                             
-                            with t1:
-                                st.caption("Tweet asli, hasil preprocessing, dan label sentimen sebelum dikonversi 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)
+                            # TABEL 1: SENTIMEN MENTAH
+                            st.markdown("#### 🗣️ Data Sentimen Mentah")
+                            st.caption("Tweet asli, hasil preprocessing, dan label prediksi dari 5 model NLP 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}
@@ -372,22 +444,27 @@ with tab2:
                             for col in models:
                                 daily_display_cols.extend([col, f"{col}_label"])
 
-                            with t2:
-                                st.caption("Skor rata-rata sentimen harian.")
-                                st.dataframe(df_sentiment_daily[daily_display_cols], use_container_width=True)
+                            # TABEL 2: AGREGASI HARIAN
+                            st.markdown("<br>", unsafe_allow_html=True)
+                            st.markdown("#### 🔢 Agregasi 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)
 
-                            with t3:
-                                st.caption("Data volatilitas harga Bitcoin berdasarkan CoinGecko API.")
-                                st.dataframe(df_price[["date", "price", "pct_change", "log_return"]], use_container_width=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("### 🗂️ Dataset Final (Siap Uji)")
+                            st.markdown("---")
+                            st.markdown("### 🗂️ Dataset Final (Tabel Terintegrasi Siap Uji)")
                             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)
+                            st.dataframe(df_merged[final_display_cols], use_container_width=True, hide_index=True)
 
-                            # Export Buttons using columns
+                            # 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")
@@ -439,16 +516,19 @@ with tab2:
                             st.subheader("📈 Trend Analisis: Sentiment vs BTC Volatility")
                             
                             fig_line, ax_line = plt.subplots(figsize=(14, 6))
+                            
+                            # Warna garis BTC (Bitcoin Orange)
                             ax_line.plot(df_merged["date"], df_merged["log_return"], label="BTC Log Return", color="#F7931A", linewidth=3, linestyle="-")
                             
-                            colors = ["#4ea8de", "#48bfe3", "#56cfe1", "#64dfdf", "#72efdd"]
+                            # Palet warna baru menyesuaikan ilustrasi (Ungu tua, Hijau terang, Pink salem, Biru toska, Indigo)
+                            colors = ["#4F46E5", "#10B981", "#F472B6", "#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 Rata-Rata Sentimen Harian Terhadap Volatilitas Harga Bitcoin", color="white", fontsize=14, pad=15)
-                            ax_line.set_xlabel("Tanggal", color="#c9d1d9", fontsize=10)
-                            ax_line.set_ylabel("Nilai (Value)", color="#c9d1d9", fontsize=10)
-                            ax_line.legend(loc='upper left', bbox_to_anchor=(1, 1), frameon=False)
+                            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='white', edgecolor='#e5e7eb')
                             plt.tight_layout()
                             st.pyplot(fig_line)
 
@@ -464,18 +544,19 @@ with tab2:
                             for idx, method in enumerate(models_list):
                                 with cols[idx % 3]:
                                     fig_scatter, ax_scatter = plt.subplots(figsize=(5, 4))
+                                    # Menggunakan warna Ungu Gelap (dari ilustrasi celana/tombol) dan Oranye Terang (garis)
                                     sns.regplot(data=df_merged, x=method, y="log_return", ax=ax_scatter, 
-                                                scatter_kws={"s": 50, "color": "#48bfe3", "alpha": 0.7}, 
-                                                line_kws={"color": "#F7931A", "linewidth": 2})
-                                    ax_scatter.set_title(f"{method.upper()} vs Log Return", color="white")
-                                    ax_scatter.set_xlabel("Skor Sentimen", color="#c9d1d9")
-                                    ax_scatter.set_ylabel("Log Return", color="#c9d1d9")
+                                                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="#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)
                             
                             with st.expander("📖 Panduan Membaca Grafik"):
                                 st.write("- **Garis Orange (Trendline):** Menunjukkan arah korelasi (Naik = Positif, Turun = Negatif).")
-                                st.write("- **Titik Biru:** Sebaran data, semakin merapat ke garis orange berarti korelasi semakin kuat.")
+                                st.write("- **Titik Ungu:** Sebaran data, semakin merapat ke garis orange berarti korelasi semakin kuat.")
 
                             # ==============================
                             # KESIMPULAN & PEMBAHASAN AKHIR