Update src/streamlit_app.py

src/streamlit_app.py

@@ -23,12 +23,11 @@ DetectorFactory.seed = 0
 # SETTING PATH ABSOLUT UNTUK GAMBAR
 # ==============================
 BASE_DIR = os.path.dirname(os.path.abspath(__file__))
-
 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 & STATE NAVIGASI
+# KONFIGURASI HALAMAN
 # ==============================
 st.set_page_config(page_title="SKRIPSI - Sentimen BTC", page_icon="₿", layout="wide", initial_sidebar_state="collapsed")
 
@@ -36,194 +35,147 @@ if 'page' not in st.session_state:
     st.session_state.page = "uji_kalimat"
 
 # ==============================
-# GLOBAL CSS (MINIMALIST & PROFESSIONAL)
+# "CSS HACKING" - VANCOUVER BITCOIN VIBE (ORANGE BLUR)
 # ==============================
 st.markdown("""
 <style>
-    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+    /* Mengimpor Font Inter (Standar Industri Web Web3/Crypto) */
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
 
-    /* Menyembunyikan elemen default Streamlit agar terlihat seperti website asli */
+    /* Menyembunyikan elemen bawaan Streamlit */
     #MainMenu {visibility: hidden;}
     footer {visibility: hidden;}
     header {visibility: hidden;}
     
-    /* Mengatur padding utama halaman */
+    /* 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 */
     .block-container {
         padding-top: 2rem !important;
-        padding-bottom: 2rem !important;
+        padding-bottom: 3rem !important;
         max-width: 1200px !important;
     }
 
-    /* Global Font */
-    html, body, [class*="css"] {
-        font-family: 'Inter', sans-serif !important;
+    /* STYLING TOMBOL STREAMLIT (Dibuat Mirip Tombol Website Asli) 
+    */
+    div[data-testid="stButton"] > button {
+        background-color: #F7931A !important; /* Orange Bitcoin */
+        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;
+        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;
     }
 
-    /* Styling Navbar Container */
-    .nav-container {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding-bottom: 1.5rem;
-        margin-bottom: 2rem;
-        border-bottom: 1px solid rgba(128, 128, 128, 0.2);
+    /* STYLING TEXT AREA (Glassmorphism & Clean Input) 
+    */
+    .stTextArea textarea {
+        background-color: rgba(255, 255, 255, 0.8) !important;
+        backdrop-filter: blur(5px);
+        color: #0F172A !important;
+        border: 1px solid #CBD5E1 !important;
+        border-radius: 10px !important;
+        font-size: 1.05rem;
+        padding: 1.2rem !important;
+        box-shadow: inset 0 2px 4px rgba(0,0,0,0.02) !important;
     }
-    
-    /* Styling Tombol Standar Streamlit menjadi Minimalis */
-    div[data-testid="stButton"] > button {
-        border-radius: 30px;
-        font-weight: 600;
-        padding: 0.5rem 1.5rem;
-        transition: all 0.3s ease;
-        border: 1px solid transparent;
+    .stTextArea textarea:focus {
+        border-color: #F7931A !important;
+        box-shadow: 0 0 0 2px rgba(247, 147, 26, 0.3) !important;
+    }
+
+    /* STYLING METRIK KARTU (Tab Analisis Batch) 
+    */
+    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 */
+        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;
+    }
+    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);
     }
     
-    /* Menghilangkan border focus merah default Streamlit */
-    div[data-testid="stButton"] > button:focus:not(:active) {
-        border-color: transparent;
-        box-shadow: none;
-        color: inherit;
+    /* 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;
     }
 </style>
 """, unsafe_allow_html=True)
 
 # ==============================
-# TEMA DINAMIS PER HALAMAN
-# ==============================
-if st.session_state.page == "uji_kalimat":
-    # TEMA DARK/ORANGE (Premium Landing Page Look)
-    st.markdown("""
-    <style>
-        .stApp {
-            background-color: #0F172A; /* Dark Slate Minimalist */
-            color: #F8FAFC;
-        }
-        h1, h2, h3, h4, h5, h6, p, label {
-            color: #F8FAFC !important;
-        }
-        
-        /* Tombol Aksi Utama - Orange Bitcoin */
-        div[data-testid="stButton"] > button {
-            background-color: #F7931A !important;
-            color: #FFFFFF !important;
-            border: none;
-            box-shadow: 0 4px 6px rgba(247, 147, 26, 0.2);
-        }
-        div[data-testid="stButton"] > button:hover {
-            background-color: #E68310 !important;
-            transform: translateY(-2px);
-        }
-
-        /* Navigasi Button di Halaman 1 */
-        .nav-btn-active > button {
-            background-color: transparent !important;
-            border: 2px solid #F7931A !important;
-            color: #F7931A !important;
-        }
-        .nav-btn-inactive > button {
-            background-color: transparent !important;
-            border: 1px solid #475569 !important;
-            color: #94A3B8 !important;
-        }
-        
-        /* Styling Text Area Input */
-        .stTextArea textarea {
-            background-color: #1E293B !important;
-            color: #F8FAFC !important;
-            border: 1px solid #334155 !important;
-            border-radius: 12px;
-            font-size: 1rem;
-            padding: 1rem;
-        }
-        .stTextArea textarea:focus {
-            border-color: #F7931A !important;
-            box-shadow: 0 0 0 1px #F7931A !important;
-        }
-    </style>
-    """, unsafe_allow_html=True)
-else:
-    # TEMA TERANG (Dashboard Analisis Clean)
-    st.markdown("""
-    <style>
-        .stApp {
-            background-color: #FFFFFF;
-            color: #0F172A;
-        }
-        h1, h2, h3, h4, h5, h6, label {
-            color: #0F172A !important;
-        }
-        p, span {
-            color: #475569 !important;
-        }
-        
-        /* Tombol Aksi Utama - Dark Navy */
-        div[data-testid="stButton"] > button {
-            background-color: #0F172A !important;
-            color: #FFFFFF !important;
-            border: none;
-        }
-        div[data-testid="stButton"] > button:hover {
-            background-color: #1E293B !important;
-            transform: translateY(-2px);
-        }
-
-        /* Navigasi Button di Halaman 2 */
-        .nav-btn-inactive > button {
-            background-color: transparent !important;
-            border: 1px solid #CBD5E1 !important;
-            color: #64748B !important;
-        }
-        .nav-btn-active > button {
-            background-color: transparent !important;
-            border: 2px solid #0F172A !important;
-            color: #0F172A !important;
-        }
-        
-        /* Styling Dataframe / Table */
-        div[data-testid="stDataFrame"] {
-            border: 1px solid #E2E8F0;
-            border-radius: 12px;
-            overflow: hidden;
-        }
-    </style>
-    """, unsafe_allow_html=True)
-
-# ==============================
-# HEADER & NAVIGASI
+# HEADER & NAVIGASI (Dibuat ala Navbar Web)
 # ==============================
 def set_page(page_name):
     st.session_state.page = page_name
 
-# Menggunakan Columns untuk Navbar yang rapi
-col_logo, col_space, col_nav1, col_nav2 = st.columns([3, 4, 1.5, 1.5])
+st.markdown("<div style='padding-bottom: 0.5rem;'></div>", unsafe_allow_html=True)
+col_logo, col_space, col_nav1, col_nav2 = st.columns([3, 4, 1.5, 1.5], gap="small")
 
 with col_logo:
-    # Logo text
-    color_logo = "#F8FAFC" if st.session_state.page == "uji_kalimat" else "#0F172A"
-    st.markdown(f"<h3 style='margin:0; padding:10px 0; font-weight:700; color:{color_logo} !important;'>₿itcoin Sentimen</h3>", unsafe_allow_html=True)
+    # 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)
 
 with col_nav1:
-    btn_class = "nav-btn-active" if st.session_state.page == "uji_kalimat" else "nav-btn-inactive"
-    st.markdown(f'<div class="{btn_class}">', unsafe_allow_html=True)
-    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()
-    st.markdown('</div>', unsafe_allow_html=True)
 
 with col_nav2:
-    btn_class = "nav-btn-active" if st.session_state.page == "analisis_batch" else "nav-btn-inactive"
-    st.markdown(f'<div class="{btn_class}">', unsafe_allow_html=True)
-    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()
-    st.markdown('</div>', unsafe_allow_html=True)
 
-# Divider Navbar
-st.markdown("<div style='border-bottom: 1px solid rgba(128,128,128,0.2); margin-top: 10px; margin-bottom: 40px;'></div>", unsafe_allow_html=True)
+# Divider bawah navbar
+st.markdown("<hr style='border: none; height: 1px; background-color: #E2E8F0; margin-top: 10px; margin-bottom: 40px;'>", unsafe_allow_html=True)
 
 
 # ==============================
-# DOWNLOAD RESOURCES & LOAD MODELS (Tetap Sama)
+# DOWNLOAD RESOURCES & LOAD MODELS
 # ==============================
 @st.cache_resource
 def download_nltk_resources():
@@ -243,11 +195,11 @@ def load_all_models():
     roberta_large = pipeline("sentiment-analysis", model="siebert/sentiment-roberta-large-english", device=-1, truncation=True, max_length=512)
     return vader, bertweet, roberta, roberta_large
 
-with st.spinner('Mempersiapkan model NLP...'):
+with st.spinner('Mempersiapkan mesin AI NLP...'):
     vader, bertweet, roberta, roberta_large = load_all_models()
 
 # ==============================
-# FUNGSI CLEAN TEXT & MAPPING (Tetap Sama)
+# FUNGSI CLEAN TEXT & MAPPING
 # ==============================
 def clean_text(text):
     text = str(text).lower()
@@ -277,29 +229,29 @@ def get_daily_label(score):
 
 
 # ==============================================================================
-# HALAMAN 1: UJI KALIMAT (TEMA DARK/ORANGE)
+# HALAMAN 1: UJI KALIMAT (Mirip Gambar 1 - Tema Terang Oranye)
 # ==============================================================================
 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: 2rem;">
-            <h1 style="font-size: 3.5rem; line-height: 1.1; margin-bottom: 1.5rem; font-weight: 700; letter-spacing: -1px;">
+        <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>
             </h1>
-            <p style='font-size: 1.15rem; font-weight: 400; color: #94A3B8 !important; margin-bottom: 2rem;'>
+            <p style='font-size: 1.15rem; font-weight: 400; color: #475569 !important; margin-bottom: 2rem;'>
                 Analisis Volatilitas Harga Bitcoin Terhadap Sentimen Publik Pada Platform X Berbasis Python.
             </p>
-            <div style="background-color: rgba(247, 147, 26, 0.1); border-left: 4px solid #F7931A; padding: 15px; border-radius: 4px; margin-bottom: 2rem;">
-                <p style="margin: 0; font-size: 0.95rem; color: #E2E8F0 !important;">
-                    <b>Peneliti:</b> Arya Galuh Saputra (H1D022022)
+            <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;">
+                    <span style="color: #F7931A;">📌</span> <b>Peneliti:</b> Arya Galuh Saputra (H1D022022)
                 </p>
             </div>
         </div>
         """, unsafe_allow_html=True)
         
-        user_input = st.text_area("Masukkan Tweet (Bahasa Inggris):", "Great, Bitcoin just crashed another 10% today.", height=120)
+        user_input = st.text_area("✍️ Masukkan Tweet (Bahasa Inggris):", "Great, Bitcoin just crashed another 10% today.", height=120)
         
         st.markdown("<br>", unsafe_allow_html=True)
         analyze_btn = st.button("🚀 Analisis Sentimen Sekarang", use_container_width=True)
@@ -308,17 +260,16 @@ if st.session_state.page == "uji_kalimat":
         try:
             st.image(img_hero, use_container_width=True)
         except Exception:
-            st.info(f"Visualisasi Hero akan muncul di sini. (Pastikan file {os.path.basename(img_hero)} tersedia)")
+            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: #334155;'><br>", unsafe_allow_html=True)
-        st.markdown("<h3 style='text-align: center; margin-bottom: 2rem;'>📋 Hasil Deteksi Sentimen</h3>", unsafe_allow_html=True)
+        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)
         
         try:
             if detect(user_input) != 'en':
                 st.warning("⚠️ Teks sepertinya bukan bahasa Inggris. Hasil prediksi mungkin memiliki bias.")
-        except:
-            pass
+        except: pass
 
         text = clean_text(user_input)
         
@@ -354,14 +305,14 @@ if st.session_state.page == "uji_kalimat":
 
 
 # ==============================================================================
-# HALAMAN 2: ANALISIS BATCH DATA (TEMA TERANG/KREM CLEAN)
+# HALAMAN 2: ANALISIS BATCH DATA (Mirip Gambar 2 - Dashboard Modern)
 # ==============================================================================
 elif st.session_state.page == "analisis_batch":
-    # Tema Matplotlib
+    # Tema Matplotlib/Seaborn disesuaikan dengan latar terang transparan
     plt.style.use('default') 
     sns.set_theme(style="whitegrid", rc={
-        "axes.facecolor": "#F8FAFC", 
-        "figure.facecolor": "#FFFFFF", 
+        "axes.facecolor": "rgba(255,255,255,0.7)", 
+        "figure.facecolor": "rgba(255,255,255,0)", 
         "axes.edgecolor": "#E2E8F0", 
         "text.color": "#0F172A", 
         "xtick.color": "#64748B", 
@@ -374,14 +325,14 @@ elif st.session_state.page == "analisis_batch":
     with col_upload:
         st.markdown("""
         <div style="padding-top: 1rem;">
-            <h2 style="font-size: 2.5rem; margin-bottom: 0.5rem; font-weight: 700; letter-spacing: -0.5px;">Analisis Batch Data</h2>
-            <p style='font-size: 1.1rem; margin-bottom: 2rem;'>Unggah file rekam jejak tweet (.txt) untuk diekstraksi dan dianalisis secara masal terhadap volatilitas pasar.</p>
+            <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>
         </div>
         """, unsafe_allow_html=True)
         
-        tweet_files = st.file_uploader("Pilih file Tweet (.txt)", type=['txt'], accept_multiple_files=True)
+        tweet_files = st.file_uploader("📂 Pilih file Tweet (.txt)", type=['txt'], accept_multiple_files=True)
         
-        with st.expander("📌 Format TXT yang Didukung"):
+        with st.expander("📌 Format TXT yang Didukung (Klik untuk melihat)"):
             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("<br>", unsafe_allow_html=True)
@@ -463,17 +414,17 @@ elif st.session_state.page == "analisis_batch":
             st.error("❌ Data kosong. Pastikan format penulisan TXT benar dan tweet berbahasa Inggris.")
         else:
             # Metrics Dashboard
-            st.markdown("### 📊 Ringkasan Pemrosesan")
+            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 Diproses", f"{total_tweets_uploaded}", border=True)
-            col_metric2.metric("Tweet Diabaikan (Non-EN)", f"{total_tweets_skipped}", border=True)
-            col_metric3.metric("Total Model", "5 NLP Models", border=True)
+            col_metric1.metric("Tweet Berhasil Diproses", f"{total_tweets_uploaded}", border=False)
+            col_metric2.metric("Tweet Diabaikan (Non-EN)", f"{total_tweets_skipped}", border=False)
+            col_metric3.metric("Total Model NLP", "5 Models", border=False)
             
             target_dates = sorted(df['date'].unique())
             start_unix = int(datetime.strptime(target_dates[0], "%Y-%m-%d").replace(tzinfo=timezone.utc).timestamp()) - 86400
             end_unix = int(datetime.strptime(target_dates[-1], "%Y-%m-%d").replace(tzinfo=timezone.utc).timestamp()) + 86400
             
-            st.info("📡 Mengambil data harga Bitcoin dari CoinGecko API...")
+            st.info("📡 Menarik 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}