app.py

import streamlit as st
from rag_engine import SecureCodeRAG

# 1. 設定頁面配置
st.set_page_config(
    page_title="SecureCode AI - 資安審計助手", 
    page_icon="🛡️", 
    layout="wide",
    initial_sidebar_state="collapsed"
)

# 2. 自定義 CSS (DOM 結構修正版)
st.markdown("""
    <style>
    /* --- A. 隱藏 Streamlit 頂部 UI --- */
    header {visibility: hidden;}
    .stApp {margin-top: -30px;}
    
    /* --- B. 動態背景 --- */
    .stApp {
        background: linear-gradient(-45deg, #e0eafe, #eef2f3, #e0c3fc, #d4fc79);
        background-size: 400% 400%;
        animation: gradientBG 15s ease infinite;
    }
    @keyframes gradientBG {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }

    /* --- C. 全域字體優化 --- */
    html, body, p, li, h1, h2, h3 {
        font-family: "Microsoft JhengHei", "Heiti TC", sans-serif !important;
        color: #333;
    }
    p, li {
        font-size: 20px !important;
        line-height: 1.6 !important;
    }
    code {
        font-size: 16px !important;
        font-family: 'Consolas', monospace !important;
    }

    /* --- D. 按鈕優化 (置中 + 純白文字) --- */
    div.stButton > button {
        width: 100%;
        border-radius: 50px;
        text-align: center;
        height: 3.5em !important;
        font-size: 1.5rem !important;
        font-weight: bold !important;
        background: linear-gradient(90deg, #1e3c72 0%, #2a5298 100%);
        border: none;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        transition: all 0.3s ease;
        color: #ffffff !important; 
    }
    div.stButton > button p {
        color: #ffffff !important;
    }
    div.stButton > button:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0,0,0,0.3);
        color: #ffffff !important;
    }

    /* --- E. 輸入框優化 --- */
    .stTextArea textarea {
        font-size: 16px !important;
        background-color: #ffffff !important;
        border: 2px solid #ccc;
        border-radius: 10px;
        color: #000 !important;
    }

    /* --- F. Expander 標題美化 --- */
    .streamlit-expanderHeader {
        font-size: 1.2rem !important;
        font-weight: bold !important;
        color: #1e3c72 !important;
        background-color: rgba(255, 255, 255, 0.8) !important;
        border-radius: 10px;
    }

    /* --- G. 輸出框樣式 (DOM 結構修正 - 這裡是大改的地方) --- */
    
    /* 1. 外層 Wrapper：只負責邊框與陰影，背景透明 */
    [data-testid="stVerticalBlockBorderWrapper"] {
        border: 3px solid #1e3c72 !important;
        border-radius: 20px !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important;
        padding: 0 !important; /* ⚠️ 關鍵：Padding 交給內層，讓白色填滿 */
        margin-top: 20px;
        background: transparent !important;
    }
    
    /* 2. 內層 div (真正的內容層)：負責白色背景 */
    [data-testid="stVerticalBlockBorderWrapper"] > div {
        background-color: #ffffff !important; /* ✅ 強制白色 */
        background: #ffffff !important;
        border-radius: 17px !important; /* 比外框小一點點以防溢出 */
        padding: 40px !important; /* 內容與邊框的距離 */
        width: 100% !important;
    }

    /* 標題樣式 */
    .main-title {
        text-align: center;
        background: -webkit-linear-gradient(120deg, #1e3c72, #2a5298);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 4rem;
        font-weight: 800;
        margin-bottom: 0;
        padding-top: 20px;
    }
    .sub-title {
        text-align: center;
        font-size: 1.5rem;
        color: #555;
        margin-bottom: 30px;
    }
    
    #MainMenu {visibility: hidden;}
    footer {visibility: hidden;}
    </style>
""", unsafe_allow_html=True)

# 3. 標題區域
st.markdown('<h1 class="main-title">🛡️ SecureCode AI</h1>', unsafe_allow_html=True)
st.markdown('<p class="sub-title">🚀 基於 RAG 技術的智慧型程式碼品質與資安漏洞分析助手</p>', unsafe_allow_html=True)

# 4. 功能特色
m1, m2, m3 = st.columns(3)
with m1:
    st.info("#### 🐛 **資安漏洞檢測**\n\n偵測 SQL Injection, XSS 等 OWASP Top 10 風險。")
with m2:
    st.warning("#### 📉 **複雜度分析**\n\n計算 Time Complexity (Big O) 並找出效能瓶頸。")
with m3:
    st.success("#### 🛠️ **自動重構建議**\n\nAI 自動生成修復後的程式碼範例與改善說明。")

st.divider()

# 5. 初始化 RAG 引擎
@st.cache_resource
def load_rag_engine():
    return SecureCodeRAG()

try:
    rag_engine = load_rag_engine()
except Exception as e:
    st.error(f"❌ 系統初始化失敗\n{e}")
    st.stop()

# 6. 主要版面配置

# --- A. 輸入區 (預設展開) ---
with st.expander("📝 點此展開 / 收合 程式碼輸入區", expanded=True):
    
    code_input = st.text_area(
        "請在此貼上欲分析的程式碼片段：", 
        value="""# 範例：易受 SQL Injection 攻擊的 Python 程式碼
import sqlite3

def get_user_info(user_id):
    conn = sqlite3.connect('db.sqlite')
    cursor = conn.cursor()
    # 錯誤示範：直接字串拼接
    query = "SELECT * FROM users WHERE id = '" + user_id + "'"
    cursor.execute(query)
    return cursor.fetchall()
""", 
        height=400, 
        label_visibility="collapsed"
    )
    
    st.write("") 
    
    # 按鈕區域
    c1, c2, c3 = st.columns([6, 4, 4]) 
    with c2:
        analyze_btn = st.button("🚀 開始深度分析")

# --- B. 輸出區 ---
if analyze_btn:
    if not code_input.strip():
        st.warning("⚠️ 請先輸入程式碼再來按我！")
    else:
        st.write("") 
        st.subheader("📊 分析報告")
        
        # CSS 會處理這裡的樣式，不需要額外的 key
        with st.container(border=True):
            with st.spinner("🔍 AI 正在分析程式碼與資安漏洞..."):
                try:
                    response = rag_engine.analyze_code(code_input)
                    st.markdown(response)
                    st.toast('分析完成！建議收合上方輸入區以獲得最佳閱讀體驗。', icon='✅')
                except Exception as e:
                    st.error(f"分析過程中發生錯誤: {e}")

else:
    pass
    
# 頁尾
st.markdown(
    """<div style='text-align: center; color: #555; padding: 40px;'>
    © 2025 SecureCode AI | Powered by <b>LangChain</b>, <b>Google Gemini</b>, <b>ChromaDB</b>
    </div>""", 
    unsafe_allow_html=True
)