Upload 5 files

app.py

@@ -0,0 +1,374 @@
+import streamlit as st
+import joblib, numpy as np, pandas as pd, re, os, datetime, matplotlib, base64, io
+import matplotlib.pyplot as plt, matplotlib.patches as mpatches
+from collections import Counter
+matplotlib.use("Agg")
+
+st.set_page_config(page_title="Firewall Log Classifier", layout="wide", initial_sidebar_state="collapsed")
+MODEL_DIR = os.path.dirname(os.path.abspath(__file__))
+
+@st.cache_resource
+def load_artifacts():
+    m=joblib.load(os.path.join(MODEL_DIR,"model.joblib"))
+    s=joblib.load(os.path.join(MODEL_DIR,"scaler.joblib"))
+    l=joblib.load(os.path.join(MODEL_DIR,"label_encoder.joblib"))
+    return m,s,l
+model,scaler,le=load_artifacts()
+AC={"allow":"#7ec8e3","deny":"#f4a261","drop":"#f9e07f","reset-both":"#b39ddb"}
+for k,v in [("page","home"),("chat_history",[]),("last_result",None),("uploaded_results",[]),("file_name","")]:
+    if k not in st.session_state: st.session_state[k]=v
+
+def parse_log_line(line):
+    nums=[int(n) for n in re.findall(r"\b(\d+)\b",line)]; nums+=[0]*(11-len(nums)); return nums[:11]
+def predict(features):
+    a=np.array(features,dtype=float).reshape(1,-1); sc=scaler.transform(a)
+    lbl=model.predict(sc)[0]; pr=model.predict_proba(sc)[0]
+    act=le.inverse_transform([lbl])[0]; conf=float(np.max(pr))
+    pd_={le.inverse_transform([i])[0]:round(float(p)*100,1) for i,p in enumerate(pr)}
+    return act,conf,pd_
+def bc(a): return AC.get(a,"#888")
+def add_hist(log,action,conf):
+    st.session_state.chat_history.append({"time":datetime.datetime.now().strftime("%H:%M:%S"),"log":log[:80]+("..." if len(log)>80 else ""),"action":action,"confidence":conf})
+def fig_to_b64(fig):
+    buf=io.BytesIO(); fig.savefig(buf,format="png",dpi=120,bbox_inches="tight",transparent=True); buf.seek(0)
+    return base64.b64encode(buf.read()).decode()
+
+def lfig(w=2.5,h=1.5):
+    fig,ax=plt.subplots(figsize=(w,h))
+    fig.patch.set_alpha(0); ax.set_facecolor((0.94,0.97,1.0,0.5))
+    ax.tick_params(colors="#4a7a9a",labelsize=5); ax.xaxis.label.set_color("#4a7a9a"); ax.yaxis.label.set_color("#4a7a9a")
+    for sp in ax.spines.values(): sp.set_edgecolor("#b0d8f0"); sp.set_linewidth(0.6)
+    return fig,ax
+
+# ── CSS ───────────────────────────────────────────────────────────────────────
+st.markdown("""
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&family=Outfit:wght@300;400;500;600&display=swap');
+*,html,body,[class*="css"]{font-family:'Outfit',sans-serif;box-sizing:border-box;}
+.stApp{background:radial-gradient(ellipse at 15% 60%,#8ecfee 0%,#b0dcf5 25%,#d8eefa 45%,#eef6fc 65%,#ffffff 80%,#cce8f5 100%);background-attachment:fixed;min-height:100vh;}
+#MainMenu,footer,header{visibility:hidden;}
+.block-container{padding:0.5rem 2rem 0.2rem 2rem !important;max-width:100% !important;}
+section[data-testid="stSidebar"]{display:none !important;}
+[data-testid="collapsedControl"]{display:none !important;}
+
+/* ── Greeting ── */
+.greeting-glow{position:relative;text-align:center;margin-bottom:36px;animation:floatUp 0.85s cubic-bezier(0.16,1,0.3,1) both;}
+.greeting-glow::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-55%);width:600px;height:320px;background:radial-gradient(ellipse at center,rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.45) 45%,transparent 75%);border-radius:50%;pointer-events:none;z-index:0;}
+.greeting-glow>*{position:relative;z-index:1;}
+.greeting-hi{font-family:'Cormorant Garamond',serif;font-size:clamp(2.4rem,5vw,3.8rem);font-weight:300;color:#1a4a72;line-height:1.25;margin-bottom:8px;}
+.greeting-hi strong{font-weight:600;color:#0a7ab5;}
+.greeting-sub{font-size:0.95rem;color:#6a9abb;font-weight:300;}
+@keyframes floatUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
+
+/* ── Textarea ── */
+.stTextArea textarea{border:1px solid rgba(140,200,235,0.35) !important;border-radius:16px !important;background:white !important;font-size:0.97rem !important;color:#2a4060 !important;padding:20px 22px !important;resize:none !important;box-shadow:0 8px 32px rgba(80,160,220,0.10) !important;outline:none !important;}
+.stTextArea textarea:focus{border-color:rgba(74,176,232,0.45) !important;outline:none !important;}
+.stTextArea textarea::placeholder{color:#aac8de !important;font-family:'Cormorant Garamond',serif !important;font-style:italic !important;}
+.stTextArea label{display:none !important;}
+.stTextArea,.stTextArea>div,.stTextArea>div>div{border:none !important;box-shadow:none !important;background:transparent !important;outline:none !important;}
+[data-testid="stFileUploader"]{visibility:hidden !important;height:0 !important;overflow:hidden !important;margin:0 !important;padding:0 !important;}
+
+/* ── All Streamlit buttons: transparent, white border, Cormorant, #1a4a72 ── */
+div.stButton > button,
+div.stButton > button:hover,
+div.stButton > button:focus,
+div.stButton > button:active {
+    background: transparent !important;
+    background-color: transparent !important;
+    border: 1.5px solid rgba(255,255,255,0.85) !important;
+    border-radius: 12px !important;
+    color: #1a4a72 !important;
+    -webkit-text-fill-color: #1a4a72 !important;
+    font-family: 'Cormorant Garamond', serif !important;
+    font-size: 1.2rem !important;
+    font-weight: 500 !important;
+    letter-spacing: 0.06em !important;
+    box-shadow: none !important;
+    outline: none !important;
+    padding: 11px 0 !important;
+    width: 100% !important;
+    transition: background 0.2s ease, border-color 0.2s ease !important;
+}
+div.stButton > button:hover {
+    background: rgba(255,255,255,0.22) !important;
+    border-color: white !important;
+}
+div.stButton > button p {
+    font-family: 'Cormorant Garamond', serif !important;
+    font-size: 1.2rem !important;
+    font-weight: 500 !important;
+    color: #1a4a72 !important;
+    -webkit-text-fill-color: #1a4a72 !important;
+    letter-spacing: 0.06em !important;
+    margin: 0 !important;
+}
+
+/* ── Button columns: force full width at every level ── */
+[data-testid="stHorizontalBlock"] { gap: 6px !important; }
+div.stButton { width: 100% !important; display: block !important; }
+div.stButton > button { display: block !important; }
+.metric-card{background:rgba(255,255,255,0.50);backdrop-filter:blur(6px);border:1px solid rgba(180,220,245,0.55);border-radius:14px;padding:12px 10px;text-align:center;}
+.metric-card .label{font-size:0.63rem;color:#90b8d4;text-transform:uppercase;letter-spacing:0.12em;margin-bottom:7px;font-weight:600;}
+.metric-card .value{font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:600;color:#1a7ab5;line-height:1;}
+.metric-card .sub{font-size:0.7rem;color:#90b8d4;margin-top:5px;}
+.result-card{background:rgba(255,255,255,0.55);backdrop-filter:blur(8px);border-radius:16px;padding:18px 24px;box-shadow:0 4px 20px rgba(80,160,220,0.10);border:1px solid rgba(180,220,245,0.50);margin-top:16px;animation:floatUp 0.7s cubic-bezier(0.16,1,0.3,1) both;}
+.sec-head{font-size:0.64rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:#7ab0d0;border-bottom:1px solid rgba(140,200,235,0.26);padding-bottom:7px;margin-bottom:14px;margin-top:28px;}
+.chat-item{background:white;border:1px solid rgba(140,200,235,0.26);border-left:3px solid #4ab0e8;border-radius:0 12px 12px 0;padding:14px 20px;margin:8px 0;font-size:0.92rem;color:#2a4060;}
+.chat-item .timestamp{font-size:0.68rem;letter-spacing:0.10em;text-transform:uppercase;color:#90b8d4;margin-bottom:4px;font-weight:600;}
+.chat-action-badge{display:inline-block;padding:2px 12px;border-radius:20px;font-size:0.74rem;letter-spacing:0.10em;text-transform:uppercase;font-weight:600;margin-top:6px;}
+.chart-card{background:rgba(255,255,255,0.55);backdrop-filter:blur(10px);border:1px solid rgba(160,215,245,0.55);border-radius:16px;padding:10px 12px 6px;box-shadow:0 4px 18px rgba(80,160,220,0.10),inset 0 1px 0 rgba(255,255,255,0.8);}
+.chart-title{font-size:0.6rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:#5a9abf;margin-bottom:4px;}
+.stDataFrame{border:1px solid rgba(140,200,235,0.30) !important;border-radius:12px !important;overflow:hidden !important;}
+.stDataFrame > div,.stDataFrame [data-testid="stDataFrameResizable"]{background:white !important;border-radius:12px !important;}
+.stDataFrame iframe{background:white !important;color-scheme:light !important;}
+[data-testid="stImage"],[data-testid="stpyplot"]{margin:0 !important;padding:0 !important;}
+.element-container{margin-bottom:0 !important;}
+::-webkit-scrollbar{width:5px;}::-webkit-scrollbar-thumb{background:rgba(74,176,232,0.35);border-radius:10px;}
+</style>
+""", unsafe_allow_html=True)
+
+
+# ── HOME ──────────────────────────────────────────────────────────────────────
+if st.session_state.page == "home":
+    st.markdown("<div style='height:14vh'></div>", unsafe_allow_html=True)
+    _, cx, _ = st.columns([1, 2.4, 1])
+    with cx:
+        st.markdown("""<div class="greeting-glow">
+            <div class="greeting-hi">Hi, I am <strong>Log Classifier</strong><br>How can I help you today?</div>
+        </div>""", unsafe_allow_html=True)
+
+        log_input = st.text_area("log", placeholder="Ask me anything...", height=160,
+                                  key="log_text_input", label_visibility="collapsed")
+
+        uploaded_file = st.file_uploader("u", type=["txt","csv","log"],
+                                          label_visibility="collapsed", key="home_uploader")
+        if uploaded_file:
+            content=uploaded_file.read().decode("utf-8",errors="ignore")
+            lines=[l.strip() for l in content.splitlines() if l.strip()]; results=[]
+            for line in lines:
+                try:
+                    feats=parse_log_line(line); act,conf,probs=predict(feats)
+                    results.append({"log":line[:60],"action":act,"confidence":round(conf*100,1),"probabilities":probs})
+                except: pass
+            st.session_state.update({"uploaded_results":results,"file_name":uploaded_file.name,"page":"dashboard"}); st.rerun()
+
+        # All 5 buttons in one row, spanning the full width of the input box
+        c1, c2, c3, c4, c5 = st.columns(5)
+        with c1: new_chat_btn   = st.button("New Chat",      key="btn_new_chat")
+        with c2: history_btn    = st.button("Chat History",  key="btn_chat_history")
+        with c3: analyze_btn    = st.button("Analyze",       key="btn_analyze")
+        with c4: upload_btn     = st.button("Upload",        key="btn_upload")
+        with c5: dashboard_btn  = st.button("Dashboard",     key="btn_dashboard")
+
+        if new_chat_btn:
+            st.session_state.update({"chat_history":[],"last_result":None,"uploaded_results":[],"file_name":"","page":"home"}); st.rerun()
+        if history_btn:
+            st.session_state.page = "history"; st.rerun()
+
+        if analyze_btn:
+            if log_input.strip():
+                try:
+                    feats=parse_log_line(log_input); act,conf,probs=predict(feats)
+                    st.session_state.last_result={"log":log_input,"action":act,"confidence":round(conf*100,1),"probabilities":probs,"features":feats}
+                    add_hist(log_input,act,round(conf*100,1)); st.rerun()
+                except Exception as e: st.error(f"Prediction error: {e}")
+            else: st.warning("Please paste a log entry before analyzing.")
+        if upload_btn: st.info("Drag and drop a file above.")
+        if dashboard_btn: st.session_state.page="dashboard"; st.rerun()
+
+        if st.session_state.last_result:
+            r=st.session_state.last_result; color=bc(r["action"])
+            pb="".join([f'<span style="display:inline-block;margin-right:12px;font-size:0.8rem;color:#4a7a9a;"><span style="color:{bc(k)};font-weight:600;">{k}</span> {v}%</span>' for k,v in r["probabilities"].items()])
+            st.markdown(f'''<div class="result-card">
+                <div style="font-size:0.6rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:#7ab0d0;margin-bottom:10px;">Prediction Result</div>
+                <div style="display:flex;align-items:baseline;gap:12px;margin-bottom:8px;">
+                    <span style="font-family:'Cormorant Garamond',serif;font-size:2.2rem;font-weight:600;color:{color};">{r["action"].upper()}</span>
+                    <span style="font-size:0.85rem;color:#6a9abb;font-weight:300;">{r["confidence"]}% confidence</span>
+                </div>
+                <div style="padding-top:6px;border-top:1px solid rgba(140,200,235,0.25);">{pb}</div>
+            </div>''', unsafe_allow_html=True)
+
+# ── HISTORY ───────────────────────────────────────────────────────────────────
+elif st.session_state.page == "history":
+    st.markdown("<div style='height:14vh'></div>", unsafe_allow_html=True)
+    _, hcol, _ = st.columns([1, 2.4, 1])
+    with hcol:
+        st.markdown('<div class="back-btn" style="margin-bottom:18px">', unsafe_allow_html=True)
+        if st.button("← Back to Home", key="hist_back"): st.session_state.page="home"; st.rerun()
+        st.markdown('</div>', unsafe_allow_html=True)
+        st.markdown('<div class="sec-head" style="margin-top:0">Chat History</div>', unsafe_allow_html=True)
+        if not st.session_state.chat_history:
+            st.markdown('<div class="chat-item">No history yet in this session.</div>', unsafe_allow_html=True)
+        else:
+            for item in reversed(st.session_state.chat_history):
+                color=bc(item["action"])
+                st.markdown(f'<div class="chat-item"><div class="timestamp">{item["time"]}</div><div style="margin-bottom:6px;">{item["log"]}</div><span class="chat-action-badge" style="background:{color}20;color:{color};border:1px solid {color}50;">{item["action"].upper()}</span><span style="font-size:0.76rem;color:#90b8d4;margin-left:10px;">{item["confidence"]}% confidence</span></div>', unsafe_allow_html=True)
+
+# ── DASHBOARD ─────────────────────────────────────────────────────────────────
+elif st.session_state.page == "dashboard":
+    hd1,hd2=st.columns([6,1])
+    with hd1: st.markdown('<div style=\'font-family:"Cormorant Garamond",serif;font-size:1.5rem;font-weight:400;color:#1a4a72;margin-bottom:4px;\'>Dashboard <span style="font-size:0.58rem;color:#7ab0d0;text-transform:uppercase;letter-spacing:0.1em;font-weight:600;vertical-align:middle;margin-left:6px;">Firewall Log Classification</span></div>', unsafe_allow_html=True)
+    with hd2:
+        if st.button("← Home", key="dash_back"): st.session_state.page="home"; st.rerun()
+
+    all_results=[]
+    if st.session_state.last_result: all_results.append(st.session_state.last_result)
+    all_results+=list(st.session_state.uploaded_results)
+
+    if not all_results:
+        st.info("No predictions yet.")
+    else:
+        actions=[r["action"] for r in all_results]; count=Counter(actions); labels=["allow","deny","drop","reset-both"]
+        total=len(all_results)
+        allow_n=count.get("allow",0); block_n=count.get("deny",0)+count.get("drop",0); reset_n=count.get("reset-both",0)
+        allow_pct=round(allow_n/total*100) if total else 0
+        block_pct=round(block_n/total*100) if total else 0
+
+        # ── Row 1: metric cards ──
+        card_style="background:rgba(255,255,255,0.60);backdrop-filter:blur(8px);border-radius:12px;padding:7px 12px;box-shadow:0 3px 14px rgba(80,160,220,0.08),inset 0 1px 0 rgba(255,255,255,0.9);"
+        lbl_style="font-size:0.50rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#7ab0d0;margin-bottom:2px;"
+        sub_style="font-size:0.55rem;color:#90b8d4;margin-top:2px;"
+        m1,m2,m3,m4=st.columns(4)
+        m1.markdown(f'<div style="{card_style}border:1px solid rgba(160,215,245,0.55);"><div style="{lbl_style}">Total</div><div style="font-family:\'Cormorant Garamond\',serif;font-size:1.6rem;font-weight:600;color:#1a4a72;line-height:1;">{total}</div><div style="{sub_style}">entries classified</div></div>',unsafe_allow_html=True)
+        m2.markdown(f'<div style="{card_style}border:1px solid rgba(126,200,227,0.45);"><div style="{lbl_style}">Allow</div><div style="font-family:\'Cormorant Garamond\',serif;font-size:1.6rem;font-weight:600;color:#7ec8e3;line-height:1;">{allow_n}</div><div style="{sub_style}">{allow_pct}% of traffic</div></div>',unsafe_allow_html=True)
+        m3.markdown(f'<div style="{card_style}border:1px solid rgba(244,162,97,0.35);"><div style="{lbl_style}">Blocked</div><div style="font-family:\'Cormorant Garamond\',serif;font-size:1.6rem;font-weight:600;color:#f4a261;line-height:1;">{block_n}</div><div style="{sub_style}">{block_pct}% of traffic</div></div>',unsafe_allow_html=True)
+        m4.markdown(f'<div style="{card_style}border:1px solid rgba(179,157,219,0.40);"><div style="{lbl_style}">Reset-Both</div><div style="font-family:\'Cormorant Garamond\',serif;font-size:1.6rem;font-weight:600;color:#b39ddb;line-height:1;">{reset_n}</div><div style="{sub_style}">terminated</div></div>',unsafe_allow_html=True)
+
+        # ── Row 2: charts ──
+        ch1, ch2 = st.columns(2)
+
+        with ch1:
+            st.markdown('<div style="background:rgba(255,255,255,0.60);backdrop-filter:blur(10px);border:1px solid rgba(160,215,245,0.50);border-radius:14px;padding:7px 12px 4px;box-shadow:0 3px 14px rgba(80,160,220,0.08);"><div style="font-size:0.50rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#5a9abf;margin-bottom:3px;">Action Distribution</div>', unsafe_allow_html=True)
+            fig_p,ax_p=plt.subplots(figsize=(2.8,1.7))
+            fig_p.patch.set_alpha(0); ax_p.set_facecolor((0,0,0,0))
+            non_zero=[(count.get(l,0),bc(l),l) for l in labels if count.get(l,0)>0]
+            if non_zero:
+                s_,c_,l_=zip(*non_zero)
+                wedges,_,at=ax_p.pie(s_,labels=None,colors=c_,autopct="%1.0f%%",startangle=90,
+                    pctdistance=0.68,wedgeprops={"linewidth":2,"edgecolor":"white","width":0.48})
+                for t in at: t.set_fontsize(6.5); t.set_color("white"); t.set_fontweight("bold")
+                for w in wedges: w.set_alpha(0.90)
+                ax_p.text(0,0,f"{total}\nlogs",ha="center",va="center",fontsize=7.5,color="#1a4a72",fontweight="bold",linespacing=1.3)
+                all_patches=[mpatches.Patch(color=bc(l),alpha=0.9,label=f"{l.upper()} {count.get(l,0)}") for l in labels]
+                ax_p.legend(handles=all_patches,loc="lower center",bbox_to_anchor=(0.5,-0.06),ncol=2,fontsize=5.5,framealpha=0,labelcolor="#2a5a82")
+            fig_p.tight_layout(pad=0.1)
+            st.pyplot(fig_p, use_container_width=False); plt.close(fig_p)
+            st.markdown('</div>', unsafe_allow_html=True)
+
+        with ch2:
+            st.markdown('<div style="background:rgba(255,255,255,0.60);backdrop-filter:blur(10px);border:1px solid rgba(160,215,245,0.50);border-radius:14px;padding:7px 12px 4px;box-shadow:0 3px 14px rgba(80,160,220,0.08);"><div style="font-size:0.50rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#5a9abf;margin-bottom:3px;">Confidence per Entry <span style="color:#4ab0e8;font-weight:400;">— 80% threshold</span></div>', unsafe_allow_html=True)
+            fig_b,ax_b=plt.subplots(figsize=(3.4,1.7))
+            fig_b.patch.set_alpha(0); ax_b.set_facecolor((0.95,0.97,1.0,0.5))
+            confs=[r["confidence"] for r in all_results[-12:]]; bar_c=[bc(r["action"]) for r in all_results[-12:]]
+            x_pos=list(range(len(confs)))
+            bars=ax_b.bar(x_pos,confs,color=bar_c,edgecolor="white",linewidth=0.8,width=0.62,alpha=0.88)
+            ax_b.axhline(y=80,color="#4ab0e8",linewidth=0.8,linestyle="--",alpha=0.8)
+            ax_b.set_ylim(0,120); ax_b.set_yticks([0,50,100]); ax_b.set_yticklabels(["0%","50%","100%"],fontsize=5.5)
+            ax_b.set_xticks(x_pos); ax_b.set_xticklabels([str(i+1) for i in x_pos],fontsize=5.5)
+            ax_b.tick_params(colors="#4a7a9a",length=2); ax_b.grid(axis="y",color="#d0eaf8",linewidth=0.5,alpha=0.9)
+            for sp in ax_b.spines.values(): sp.set_edgecolor("#c8e0f0"); sp.set_linewidth(0.5)
+            for b,v in zip(bars,confs): ax_b.text(b.get_x()+b.get_width()/2,v+1,f"{v:.0f}%",ha="center",color="#2a5a82",fontsize=4.5,fontweight="bold")
+            seen={}
+            for r in all_results:
+                if r["action"] not in seen: seen[r["action"]]=bc(r["action"])
+            ax_b.legend([mpatches.Patch(color=c,alpha=0.88) for c in seen.values()],[k.upper() for k in seen],
+                loc="upper right",fontsize=5,framealpha=0.5,labelcolor="#2a5a82",edgecolor="#d0e8f4")
+            fig_b.tight_layout(pad=0.2)
+            st.pyplot(fig_b, use_container_width=False); plt.close(fig_b)
+            st.markdown('</div>', unsafe_allow_html=True)
+
+        # ── Row 3: white HTML table ──
+        rows_html="".join([f'<tr><td style="padding:5px 10px;font-size:0.78rem;color:#2a4060;border-bottom:1px solid rgba(200,230,248,0.5);max-width:500px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{"("+r["log"][:65]+")" if not isinstance(r["log"],str) else r["log"][:65]}</td><td style="padding:5px 10px;font-size:0.75rem;font-weight:600;color:{bc(r["action"])};border-bottom:1px solid rgba(200,230,248,0.5);white-space:nowrap;">{r["action"].upper()}</td><td style="padding:5px 10px;font-size:0.75rem;color:#4a7a9a;border-bottom:1px solid rgba(200,230,248,0.5);white-space:nowrap;">{r["confidence"]}%</td></tr>' for r in all_results])
+        st.markdown(f"""
+        <div style="background:white;border:1px solid rgba(140,200,235,0.35);border-radius:12px;overflow:hidden;margin-top:6px;">
+            <table style="width:100%;border-collapse:collapse;background:white;">
+                <thead><tr style="background:rgba(220,240,252,0.85);">
+                    <th style="padding:6px 10px;font-size:0.60rem;font-weight:700;letter-spacing:0.10em;text-transform:uppercase;color:#1a4a72;text-align:left;">Log</th>
+                    <th style="padding:6px 10px;font-size:0.60rem;font-weight:700;letter-spacing:0.10em;text-transform:uppercase;color:#1a4a72;text-align:left;">Action</th>
+                    <th style="padding:6px 10px;font-size:0.60rem;font-weight:700;letter-spacing:0.10em;text-transform:uppercase;color:#1a4a72;text-align:left;">Confidence</th>
+                </tr></thead>
+                <tbody>{rows_html}</tbody>
+            </table>
+        </div>""", unsafe_allow_html=True)
+
+# ── FORCE STYLES via JavaScript — runs after React renders, always wins ───────
+st.markdown("""
+<script>
+(function() {
+    function styleBtn(btn) {
+        var s = btn.style;
+        s.setProperty('background',         'transparent',                   'important');
+        s.setProperty('background-color',   'transparent',                   'important');
+        s.setProperty('border',             '1.5px solid rgba(255,255,255,0.85)', 'important');
+        s.setProperty('border-radius',      '10px',                          'important');
+        s.setProperty('display',            'block',                         'important');
+        s.setProperty('color',              '#1a4a72',                       'important');
+        s.setProperty('-webkit-text-fill-color', '#1a4a72',                  'important');
+        s.setProperty('font-family',        "'Cormorant Garamond', serif",   'important');
+        s.setProperty('font-size',          '1.2rem',                        'important');
+        s.setProperty('font-weight',        '500',                           'important');
+        s.setProperty('letter-spacing',     '0.06em',                        'important');
+        s.setProperty('box-shadow',         'none',                          'important');
+        s.setProperty('outline',            'none',                          'important');
+        s.setProperty('width',              '100%',                          'important');
+        s.setProperty('text-align',         'center',                        'important');
+        s.setProperty('padding',            '11px 0',                        'important');
+        s.setProperty('cursor',             'pointer',                       'important');
+        // Force parent div.stButton to full width too
+        if (btn.parentElement) {
+            btn.parentElement.style.setProperty('width',   '100%', 'important');
+            btn.parentElement.style.setProperty('display', 'block','important');
+        }
+        // Style the <p> inside (Streamlit wraps text in <p>)
+        var p = btn.querySelector('p');
+        if (p) {
+            p.style.setProperty('font-family',   "'Cormorant Garamond', serif", 'important');
+            p.style.setProperty('font-size',      '1.2rem',    'important');
+            p.style.setProperty('font-weight',    '500',        'important');
+            p.style.setProperty('color',          '#1a4a72',    'important');
+            p.style.setProperty('-webkit-text-fill-color', '#1a4a72', 'important');
+            p.style.setProperty('letter-spacing', '0.06em',    'important');
+            p.style.setProperty('margin',         '0',          'important');
+        }
+        btn.addEventListener('mouseenter', function(){
+            btn.style.setProperty('background','rgba(255,255,255,0.22)','important');
+            btn.style.setProperty('border-color','white','important');
+        });
+        btn.addEventListener('mouseleave', function(){
+            btn.style.setProperty('background','transparent','important');
+            btn.style.setProperty('border','1.5px solid rgba(255,255,255,0.85)','important');
+        });
+    }
+
+    function applyAll() {
+        document.querySelectorAll('div.stButton > button').forEach(styleBtn);
+    }
+
+    applyAll();
+    [200, 500, 1000, 2000].forEach(function(d){ setTimeout(applyAll, d); });
+
+    var observer = new MutationObserver(function(mutations) {
+        var needsUpdate = false;
+        mutations.forEach(function(m) {
+            if (m.addedNodes.length) needsUpdate = true;
+        });
+        if (needsUpdate) applyAll();
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+
+    // Force dataframe iframe white
+    function styleDataframes() {
+        document.querySelectorAll('.stDataFrame iframe').forEach(function(iframe) {
+            try {
+                var doc = iframe.contentDocument || iframe.contentWindow.document;
+                if (!doc) return;
+                var s = doc.createElement('style');
+                s.textContent = 'body,html,table,thead,tbody,tr,th,td,div{background:white !important;color:#2a4060 !important;} thead th,thead td{background:rgba(220,240,252,0.95) !important;color:#1a4a72 !important;font-weight:700 !important;text-transform:uppercase !important;font-size:0.7rem !important;letter-spacing:0.06em !important;} tr:nth-child(even) td{background:rgba(235,247,255,0.7) !important;}';
+                doc.head.appendChild(s);
+            } catch(e) {}
+        });
+    }
+    [500,1000,2000,3000].forEach(function(d){ setTimeout(styleDataframes, d); });
+})();
+</script>
+""", unsafe_allow_html=True)

label_encoder.joblib

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:dfe75e6d2a847020f3ca10fb09c74e2982dbf85616ef5c310225a4c13c6cee38
+size 508

model.joblib

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:27dfde6db68fa8cabdb5ddaec8257b094c6d03d921103446cd1a113dea00bdfc
+size 8236641

requirements.txt

@@ -1,3 +1,6 @@
-altair
+streamlit
+joblib
+numpy
 pandas
-streamlit
+matplotlib
+scikit-learn

scaler.joblib

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:05ae874220fa3824577365214cfebea1e6b3cdca775a06bec5f74abe097feeb5
+size 863