Spaces:
Sleeping
Sleeping
Commit History
-
補齊「使用手冊」→「使用說明」更名的實際內容改動
上一個 commit（8eccc5a）只有檔案改名本身進去了，實際的文字內容 改動（app_agent.py 的按鈕標籤/檔案路徑/註解、assets/app.css 註解、 docs/ 底下三份文件、使用說明.md 內文與版本日期、重新產生的 使用說明.docx）因為 git add 指令裡一個路徑打錯導致整批加入失敗， 沒有真的進到上一個 commit，這裡補上。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>9615d53
-
文件同步：兩份交付文件補上 2026-08-12 本輪改動
《UIUX優化成果與技術說明》停在 8/6，本輪 8 個 commit 全未反映，且 4.4 節 「本次改版不更換配色」與背景色表（#f8fafc／#020617）已與實作不符——那是 交付給業主的文件裡的錯誤敘述，優先修掉。 本次修正： - 4.4 配色章改寫：拆成「強調色（未更動）／底色三層／線條兩級」三段， 補上淺色為何維持白底表格、以及結構線最終 1.46:1 低於 WCAG 1.4.11 的 3:1 門檻是業主連續三輪要求柔和後拍板的取捨（文字對比不受影響） - 新增 3.5 導覽列「使用手冊」下載入口、3.6 AI 訊息頭像 - 4.3 語料說明表單補：欄位不包白色卡片、「比較結構」改小標題（gr.Group→ gr.Column）、radio 欄位標籤對齊文字欄位、選項被裁切的成因與修法 - 4.2 結果分頁排版：語言指標分析的下載鈕由表格之前改到表格之後，六頁一致； 導覽列版面圖與圖示對照表補「回首頁」與「使用手冊」兩項 - 第二章修復項目 19→21：新增 2.2 ⑨（運算中途重置後畫面殘留，含「不是漏清 而是沒中止 generator」的根因）與 2.3 ⑥（表格右側空白帶，含「欄位其實 沒有錯位、13 張表逐欄量測一致」的查證結果與兩條排除掉的修法） - 4.1「開始新分析」更正為現行名稱「回首頁」（2026-07-30 已更名）並註明 第二章部分描述沿用舊名；2.3 ⑤ 的交叉引用編號修正 - app_agent.py 行數 4232→4371；更新紀錄補一列（時間正序，放最後） 《design.md》升 v1.3：AI 頭像改實心與尺寸規格、新增「導覽圖示要量實際 上色範圍」檢查、欄位標籤唯一樣式、表格不自己出捲軸（含兩條不可用的替代 做法）。 《開發優化建議》與 docs/README.md 本輪不需異動（前者結論不受影響，後者 是三份文件對照表、文件未增減）。 驗證：章節數量前後一致（2.1 六項＋2.2 九項＋2.3 六項＝標題與總覽表的 21 項，以腳本逐節數過）；design.md front matter 可被 YAML 解析、色票值 與 assets/app.css 現值相符；兩份文件所有表格欄數一致。 Co-Authored-By: Claude Opus 5 <noreply@anth…659e17c -
淺色再調：線條改用次要按鈕邊框色、底色轉淺、白氣泡、語料表單去卡片
千卉四項指定： 1. 導覽列／對話列／內容列的邊線與水平線「改成跟『重新選擇研究情境』按鈕 的邊框色一樣」→ --c-border-strong 淺色改 rgba(2,132,199,.30)，就是 button.secondary 用的那個值（實測 nav 分隔線與按鈕邊框已完全同色）。 對底 1.46:1。這是連續第三輪往柔和調，明確離開 WCAG 1.4.11 的 3:1， 屬業主拍板的視覺取捨；文字對比不受影響，仍全數通過 AA。 2. 淺色背景再淺一點 → --c-bg #e8f1fa → #f3f8fd。 3. 對話氣泡改白 → --c-bubble-bg 淺色 #ffffff（深色 #172136 不動）。 氣泡與欄底填色差剩 1.07:1，邊界改由 --c-bubble-border 撐（淺 1.69:1、 深 1.61:1，兩邊同一級）。 4. 語料說明表單去卡片： - 原文標題／作者／語言／出版年／版本：移除 Gradio 自動包的白色卡片。 這層卡片是兩件事疊起來的——.form 出框線、內層 .block 出白底與內距—— 兩層都要清才會消失。內距清掉後欄位左緣自然對齊小標題與下方表格， 達成業主要的「參考群組層資訊、水平橫列、靠左對齊」。 - 比較結構：gr.Group 改 gr.Column，Gradio 那條藍色標題橫幅與外框跟著 消失，標題自動變成跟「原文資訊」同款的藍色小標題。順帶符合本專案 既有定論——這版 Gradio 的 gr.Group 設 visible=False 只清空內容、 容器仍是 display:flex 會留空色塊，可切換的容器一律用 gr.Column。 已實測情境 1（不需要比較結構）該區塊 display:none、高度 0，無殘留。 - 群組數量／比較方式：同批去掉白底與內距。 順帶修掉一個既有 bug（業主截圖裡就已存在，不是這批造成）：那兩組 radio 的選項被裁掉一半。真因是 .form 的 align-items:stretch 把每個欄位的高度 鎖成整列高度，而那個列高只算到選項區（61px）、沒算欄位標籤（20+8px）， 多出來的 28px 被 fieldset…b1b0036 -
淡藍底色體系：降低純白／純黑面積，深淺共用三層結構
千卉回報「純黑或純白背景面積很大，整個視覺壓力也變大」，並指定淺色走 「氣泡淡藍＋對話欄底稍深淡藍」（她的方案 2）、深色邏輯相同。量過之後 確認抱怨來源不只對話欄：淺色頁面底 #f8fafc 幾乎等於白，真正的大面積 純白是 --c-surface（表格資料列＋所有 Gradio 區塊）；深色則是 #020617 近乎純黑。 底色改成三層，淺深共用同一套邏輯： 底（--c-bg） 淺 #f8fafc→#e8f1fa 深 #020617→#0b1424 浮起物（--c-bubble-bg）淺 #eef2f7→#f5faff 深 #0d1526→#172136 資料紙張（--c-surface）淺 #ffffff 維持 深 #0d1526→#172136 淺色的表格／卡片刻意維持純白：75 項指標表格是資料密集區，可讀性優先於 「消滅所有純白」；染藍的是它下面那層底，白表格因此變成浮在淡藍上的紙張。 連帶 --c-surface2／--c-thead-bg／--background-fill-secondary 同批換成 同色相的值，避免藍底配灰塊。 線條改走 sky 相（千卉：淺色邊框不要太深，要維持亮麗的淺藍）： --c-border-strong #a3aebd→#6ba3d6（結構線，約 2.3:1） --c-divider #b6c0cd→#a9cbe8（表格資料列細線） --c-input-border #a3aebd→#7fb0d9（約 2.0:1） 亮度級距不動，只換色相，手感與上一輪柔化後相同。 順帶修掉一個自己上一輪引入的深淺不一致：氣泡邊框原本共用 --c-divider， 淺色值卻是對著「深色結構線那一級（alpha .28）」挑的，而深色 --c-divider 是更淡的 .18，實測深色 1.37:1／淺色 1.61:1，兩個主題看起來不一樣。改成 獨立 token --c-bubble-border（淺 #a9cbe8、深 rgba(148,163,184,.26)）， 兩邊實測都是 1.61:1，--c-divider 也回歸單一用途。 docs/design.md 同步：新增「底色體系：三層」章節（含淺色表格為何維持白底 的準則）、線條表換新值並補「淺色一…3dc69f8 -
線條柔化：結構線降到 2.25:1、氣泡邊框改細線與深色對齊
千卉看實機截圖後回饋兩點：①淺色氣泡的邊框要跟深色一樣淡、兩個模式一致 ②整體線條對比太高、看起來醜，要更柔和。 - --c-border-strong（淺色）#7c8798 → #a3aebd：對白從 3.64:1 降到 2.25:1。 這是刻意離開 WCAG 1.4.11 的 3:1 門檻的視覺決定，但仍是改版前 1.2:1 的 近兩倍，業主原本回報的「淺色看不清楚區塊」在這個亮度差已解決；文字對比 不受影響，全站文字維持 AA。日後若要嚴格達標，把這個 token 調回 #7c8798 即可，19 處線條會一起跟上。 - 對話氣泡邊框從結構線降到細線 --c-divider：淺色 #b6c0cd 對氣泡底 1.64:1、 對欄底 1.76:1，深色 rgba(148,163,184,.28) 疊 #0d1526 是 1.67:1，兩個模式 的邊框亮度差幾乎相同——「深淺一致」是量出來的，不是各挑一個順眼的值。 - --c-input-border（淺色）同步柔化成 #a3aebd。 - 使用者訊息氣泡維持與 AI 同款（業主確認先這樣，只靠左右對齊區分）。 docs/design.md 同步三處：token 表數值、結構線離開 3:1 的取捨說明、氣泡 邊框改用細線的量測依據。 驗證：重啟後實測淺色氣泡邊框 1.64/1.76:1、結構線 2.15-2.25:1，深色數值 與改動前完全相同；情境 1 走到語料說明表單、深淺兩色截圖確認，console 僅 3 筆既有外部資源錯誤。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MQuAXWC1hCsiT48TXftPc7059e85b -
業主第四輪修改：淺色對比度、AI 頭像、下載位置、使用手冊
1. 淺色模式對比度（深色維持原樣） 新增兩級線條 token：--c-border-strong（結構線，淺色 #7c8798，對白 3.64:1、對近白底 3.2-3.5:1）與 --c-divider（表格資料列細線）。深色值 沿用原本散在 .app-header／欄邊框／標題底線各處的 rgba(148,163,184,.28) 硬寫值，那批個別覆寫規則一併刪除。三個 token 宣告點（app.css :root／ .dark、app_agent.py _DARK_MODE_HEAD_CSS）同步。 對話氣泡：淺色底改 --c-bubble-bg #eef2f7（原本白底疊欄底只有 1.07:1） 並加 1px 結構線邊框。表格表頭底改 --c-thead-bg #e2e8f0、表頭分界線改 結構線。輸入框邊框（淺色）從 1.3:1 改 3.6:1。 2. AI 對話氣泡加頭像 gr.Chatbot(avatar_images=(None, ai-avatar.svg))，28px 圓形。漸層畫在 CSS 的 .avatar-container（吃 accent token、隨主題切換），SVG 檔只放 白色四角星——avatar_images 是 Python 端參數，同一個檔沒辦法隨主題換色。 3. 語言指標分析的下載區塊移到表格下方，與其他五個結果頁順序一致 （純宣告順序調整，_TAB_IDX 位置對應不動）。 4. 左側導覽列最後加「使用手冊」下載項目 放在 result_nav_col 外、nav-items-scroll 最末，全程可見；接專案根目錄 既有的 使用手冊.docx（實測下載 41783 bytes 一致，不用改 allowed_paths）。 它是下載動作不是頁面，不進 _ALL_NAV_IDS，不搶導覽 active 狀態。 #nav_guide_btn 比照 #reset_btn 加進導覽列樣式與收合狀態的選擇器清單。 順帶讓 result_nav_col 只佔內容高度（Gradio 預設 flex:1 1 auto 會把它 撐滿、把使用手冊推到欄底）。 docs/design.md 同步：兩級線條準則、對話氣泡…f5990cb
-
新增 docs/design.md 設計系統文件
依千卉既有 DESIGN.md 慣例格式（YAML frontmatter 機器可讀 tokens + Markdown 本文說明判斷準則），從 assets/app.css 與需求彙整文件第十一節 「視覺規範」萃取本案設計系統：雙主題配色（WCAG AA 驗算通過）、字體 （Crimson Pro 英文數字 + Noto Sans TC 中文）、造型間距、圖示規範、 已知技術限制（Gradio CSS pipeline 的 :root 前綴問題等）。5ece6e2