前一天已經做出了有一點像樣的前端畫面了，但感覺還少了點味道，所以我決定把前端做得再更人性化一點、更有那種實用AI工具的感覺

app.py程式碼

import streamlit as st

# 1. 頁面基礎設定
st.set_page_config(
    page_title="蘇格拉底式程式學習系統",
    page_icon="🎓",
    layout="wide"
)

# 自訂樣式美化
st.markdown("""
    <style>
    .stCodeBlock { border-radius: 8px; }
    div[data-testid="stSidebar"] { background-color: #1E1E2E; }
    </style>
""", unsafe_allow_html=True)

# 2. 側邊欄：學習歷程與設定
with st.sidebar:
    st.title("🎓 學習儀表板")
    st.write("👤 學生：小明")
    st.progress(0.65, text="當前章節進度：65%")
    st.divider()
    selected_topic = st.selectbox(
        "選擇練習主題",
        ["Python 字典與結構", "遞迴函數設計", "API 資料處理"]
    )
    st.info("💡 提示：本系統採用蘇格拉底式引導，AI 不會直接給予答案喔！")

# 3. 主畫面排版：三欄式 (題目 | 編輯器 | AI 導師)
col_problem, col_code, col_ai = st.columns([1, 1.2, 1.1])

# --- 左欄：題目描述與自動評測結果 ---
with col_problem:
    st.subheader("📋 任務題目")
    st.markdown("""
    **題目：字典鍵值搜尋**
    
    請撰寫一個函式 `find_value(data, key)`，當搜尋的 `key` 存在於 `data` 中時返回對應的值；若不存在，請返回 `"Not Found"`。
    """)
    st.divider()
    st.subheader("🧪 自動化評測狀態")
    # 評測指標卡片
    m1, m2 = st.columns(2)
    m1.metric("測試用例通過率", "2/3", "-1 Case")
    m2.metric("時間複雜度", "O(1)", "最佳")
    
    st.warning("⚠️ 測試案例 3 未通過：當 key 不存在時未正確返回指定字串。")

# --- 中欄：程式碼寫入與執行 ---
with col_code:
    st.subheader("💻 程式碼編輯區")
    user_code = st.text_area(
        "Python 程式碼：",
        value="""def find_value(data, key):
    if key in data:
        return data[key]
    # 請在此補充邏輯""",
        height=320
    )
    
    c1, c2 = st.columns(2)
    if c1.button("🚀 送出評測", use_container_width=True):
        st.toast("評測 Agent 正在執行測試用例...")
    if c2.button("🧹 清除內容", use_container_width=True):
        st.rerun()

# --- 右欄：蘇格拉底式 AI 導師對話區 ---
with col_ai:
    st.subheader("🤖 蘇格拉底 AI 導師")
    
    # 模擬對話紀錄
    chat_container = st.container(height=360)
    with chat_container:
        st.chat_message("assistant").write("帥哥你好！我看了你的程式碼，目前處理了 key 存在的情況。那麼，當 key **不存在**時，Python 預設會發生什麼事？你要如何捕捉或處理這個情況呢？")
        st.chat_message("user").write("如果不存在，是不是要用 else？")
        st.chat_message("assistant").write("思考得很方向很對！加上 `else` 之後，題目要求的特定傳回值是什麼？你可以看看左側的評測提示喔！")

    # 輸入框
    if prompt := st.chat_input("向引導導師提問..."):
        st.toast("導師思考中...")

傳統的 Web 開發需要 HTML/CSS/JS 以及後端 API 接軌，但在原型驗證（PoC）或 Build in Public 時，Streamlit 是資料科學家與 AI 開發者最強大的武器。

語法拆解：

1. 靈活的三欄排版 (st.columns)
   我們利用 col_problem, col_code, col_ai = st.columns([1, 1.2, 1.1]) 彈性分配視窗比例，打造類似 LeetCode 的直覺體驗。
2. 指標卡片 (st.metric)
   短短一行 st.metric("測試用例通過率", "2/3", "-1 Case") 就能生出精美的數據變化卡片，非常適合用來呈現評測結果。
3. 原生 AI Chat 元件 (st.chat_message)
   Streamlit 內建對話元件，搭配 st.chat_input()，完全不需要自己從零處理聊天氣泡與滾動邏輯。

畫面雖然構建完成了，但目前它還只是一個靜態模板——題目無法動態載入，編輯區的程式碼無法送到後端執行評測，右側的 AI 導師也只能回應預先寫好的固定對話。然而，這正是現代 Web 開發最有趣的地方：先把視覺與互動體驗設計好，再逐步注入動態資料與商業邏輯。從明天開始，我們將一步步接上 API 與資料庫，讓這個 UI 真正變成一個能互動、會思考的「蘇格拉底式學習系統」。