Update app.py

app.py

@@ -401,222 +401,306 @@ STRATEGY_INFO = [
 ]
 
 CSS = """
-/* ===== 整體底色與文字對比 ===== */
-body,
-.gradio-container {
-    background: #f3efe7 !important;
-    color: #1f1b16 !important;
-    font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", sans-serif !important;
+:root {
+    --paper: #f3ecdf;
+    --paper-2: #ebe2d1;
+    --paper-3: #dcc9a8;
+    --ink: #1c2433;
+    --ink-soft: #41506a;
+    --gold: #b88a42;
+    --gold-2: #d1ab63;
+    --line: rgba(94, 74, 40, .28);
+    --panel: rgba(255, 251, 242, 0.86);
+    --panel-strong: rgba(252, 247, 238, 0.96);
+    --shadow: 0 16px 40px rgba(29, 28, 26, .12);
+}
+
+body, .gradio-container {
+    background:
+        radial-gradient(circle at top left, rgba(184,138,66,.10), transparent 32%),
+        radial-gradient(circle at bottom right, rgba(28,36,51,.08), transparent 30%),
+        linear-gradient(180deg, #f6f1e7 0%, #efe7d7 100%) !important;
+    color: var(--ink) !important;
+    font-family: 'Noto Serif TC', 'Microsoft JhengHei', serif !important;
 }
 
-/* Gradio 外層容器不要太貼邊 */
 .gradio-container {
-    max-width: 1880px !important;
-    margin: 0 auto !important;
+    max-width: 1320px !important;
 }
 
-/* ===== 頂部標題卡 ===== */
-#hdr {
-    background: #fbf6ec !important;
-    border: 1px solid #cfc3b2 !important;
-    border-top: 4px solid #2d6a4f !important;
-    border-radius: 14px !important;
-    padding: 28px 36px !important;
-    margin-bottom: 20px !important;
-    box-shadow: 0 2px 10px rgba(31, 27, 22, 0.06) !important;
+.contain, .app {
+    background: transparent !important;
 }
 
+#hdr {
+    position: relative;
+    overflow: hidden;
+    background:
+        linear-gradient(135deg, rgba(255,249,239,.97), rgba(246,238,224,.94)),
+        linear-gradient(90deg, rgba(184,138,66,.08), rgba(28,36,51,.04));
+    border: 1px solid rgba(147, 117, 69, .35);
+    border-radius: 26px;
+    padding: 30px 34px 28px;
+    margin-bottom: 18px;
+    box-shadow: var(--shadow);
+}
+#hdr::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background:
+        radial-gradient(circle at 10% 15%, rgba(184,138,66,.13), transparent 16%),
+        radial-gradient(circle at 92% 12%, rgba(28,36,51,.12), transparent 20%),
+        linear-gradient(90deg, rgba(184,138,66,.22), transparent 20%, transparent 80%, rgba(184,138,66,.22));
+    opacity: .65;
+}
+#hdr::after {
+    content: '封\A魔';
+    white-space: pre;
+    position: absolute;
+    top: 22px;
+    right: 22px;
+    color: rgba(184,138,66,.20);
+    font-size: 36px;
+    line-height: 1.05;
+    font-weight: 700;
+    letter-spacing: .18em;
+}
 .hdr-eyebrow {
-    font-size: 11px !important;
-    letter-spacing: 2.5px !important;
-    color: #2d6a4f !important;
-    text-transform: uppercase !important;
-    margin-bottom: 6px !important;
-    font-weight: 800 !important;
-    opacity: 1 !important;
+    position: relative;
+    z-index: 1;
+    font-size: 11px;
+    letter-spacing: .32em;
+    color: #8f6d32;
+    text-transform: uppercase;
+    margin-bottom: 10px;
 }
-
 .hdr-title {
-    font-size: 26px !important;
-    font-weight: 800 !important;
-    color: #1a1714 !important;
-    margin: 0 0 6px !important;
-    opacity: 1 !important;
+    position: relative;
+    z-index: 1;
+    font-size: 34px;
+    line-height: 1.2;
+    font-weight: 800;
+    color: #1c2433;
+    margin: 0 0 10px;
 }
-
 .hdr-sub {
-    font-size: 14px !important;
-    color: #4b4138 !important;
-    opacity: 1 !important;
+    position: relative;
+    z-index: 1;
+    font-size: 15px;
+    line-height: 1.85;
+    color: #5a5347;
+    max-width: 920px;
 }
-
+.hdr-quote {
+    position: relative;
+    z-index: 1;
+    margin-top: 14px;
+    color: #6b604d;
+    font-size: 13px;
+    letter-spacing: .08em;
+}
+.hdr-pills { position: relative; z-index: 1; margin-top: 16px; }
 .pill {
-    display: inline-block !important;
-    margin: 10px 5px 0 0 !important;
-    padding: 4px 11px !important;
-    border-radius: 16px !important;
-    font-size: 11px !important;
-    background: #dff0ea !important;
-    color: #24553f !important;
-    border: 1px solid rgba(45, 106, 79, .28) !important;
-    font-weight: 700 !important;
+    display: inline-block;
+    margin: 8px 8px 0 0;
+    padding: 5px 12px;
+    border-radius: 999px;
+    font-size: 11px;
+    color: #7f5a1e;
+    background: rgba(245, 233, 205, .95);
+    border: 1px solid rgba(184,138,66,.32);
 }
-
-.pill-amber {
-    background: #f7e8c4 !important;
-    color: #8a5a11 !important;
-    border-color: rgba(184, 122, 26, .35) !important;
+.pill-dark {
+    color: #e9e7df;
+    background: rgba(28,36,51,.92);
+    border-color: rgba(28,36,51,.92);
 }
 
-/* ===== 區塊卡片：避免太白、邊界更清楚 ===== */
-.card-box,
-.gradio-container .block,
-.gradio-container .form,
-.gradio-container .panel,
-.gradio-container .gr-group {
-    background: #fbf7ee !important;
-    border: 1px solid #cfc3b2 !important;
-    border-radius: 12px !important;
-    color: #1f1b16 !important;
+.card-box {
+    background: linear-gradient(180deg, rgba(255, 250, 241, .92), rgba(250, 244, 233, .90)) !important;
+    border: 1px solid rgba(147, 117, 69, .26) !important;
+    border-radius: 24px !important;
+    padding: 20px !important;
+    box-shadow: var(--shadow);
 }
 
-.card-box {
-    padding: 16px !important;
-    box-shadow: 0 2px 8px rgba(31, 27, 22, 0.05) !important;
+.sec-label {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 15px;
+    letter-spacing: .22em;
+    text-transform: uppercase;
+    color: #26324a;
+    font-weight: 800;
+    margin: 10px 0 14px;
+}
+.sec-label::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: linear-gradient(90deg, rgba(184,138,66,.6), rgba(184,138,66,0));
+}
+.sub-note {
+    margin: -4px 0 14px;
+    color: #7a6a57;
+    font-size: 12px;
+    line-height: 1.7;
 }
 
-/* API Key 區塊 */
 #apikey-box {
-    background: #fff3d8 !important;
-    border: 1.5px solid #d49a2a !important;
-    border-radius: 10px !important;
-    padding: 12px 14px !important;
-    margin-bottom: 8px !important;
+    background: linear-gradient(180deg, rgba(255,244,219,.80), rgba(255,249,238,.88));
+    border: 1.5px solid rgba(190, 135, 33, .85);
+    border-radius: 18px;
+    padding: 16px 16px 10px;
+    box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
+    margin-bottom: 10px;
 }
 
-/* ===== 標題與 Label：不要淡到看不見 ===== */
-.sec-label {
-    font-size: 12px !important;
-    letter-spacing: 1.4px !important;
-    text-transform: uppercase !important;
-    color: #3d342c !important;
-    font-weight: 900 !important;
-    margin: 16px 0 8px !important;
-    opacity: 1 !important;
+.strat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:12px 0 16px; }
+.strat-card {
+    background: linear-gradient(180deg, rgba(255,249,239,.98), rgba(246,238,223,.94));
+    border:1px solid rgba(148,120,73,.28);
+    border-radius:16px;
+    padding:12px 12px 11px;
+    cursor:pointer;
+    transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
+    text-align:left;
+    width:100%;
+    box-shadow: 0 6px 18px rgba(0,0,0,.04);
 }
-
-label,
-.gradio-container label,
-.gradio-container .label-wrap,
-.gradio-container .svelte-1gfkn6j,
-.gradio-container span {
-    color: #2b241e !important;
-    opacity: 1 !important;
+.strat-card:hover { border-color:#b88a42; box-shadow:0 10px 24px rgba(184,138,66,.12); transform: translateY(-2px); }
+.strat-card.active {
+    border-color:#b88a42;
+    background: linear-gradient(180deg, rgba(255,246,224,.98), rgba(249,238,212,.96));
+    box-shadow:0 12px 26px rgba(184,138,66,.16);
 }
+.strat-icon  { font-size:20px; margin-bottom:6px; }
+.strat-name  { font-size:14px; font-weight:800; color:#1c2433; margin:0 0 3px; }
+.strat-desc  { font-size:11.5px; color:#6d6253; line-height:1.55; }
 
-/* ===== 文字輸入框 / 輸出框 ===== */
-textarea,
-input[type="text"],
-input[type="password"],
-.gradio-container textarea,
-.gradio-container input {
-    background: #3f3a34 !important;
-    color: #fffaf0 !important;
-    border: 1px solid #6b6258 !important;
-    border-radius: 7px !important;
-    opacity: 1 !important;
-}
+#ask-btn { background: linear-gradient(180deg, #22314b, #172131) !important; color:#fff !important; border:1px solid #172131 !important; border-radius:12px !important; }
+#ask-btn:hover { filter: brightness(1.08); }
+#apply-key-btn { background: linear-gradient(180deg, #c18a22, #a97012) !important; color:#fff !important; border:1px solid #8e5d11 !important; border-radius:12px !important; }
+#apply-key-btn:hover { filter: brightness(1.06); }
 
-textarea::placeholder,
-input::placeholder {
-    color: #c7bfb3 !important;
-    opacity: 1 !important;
+button.secondary, .secondary-button {
+    border-radius: 12px !important;
 }
 
-/* 輸出文字不要灰掉 */
-.gradio-container [data-testid="textbox"],
-.gradio-container .prose,
-.gradio-container p,
-.gradio-container div {
-    opacity: 1 !important;
+.gr-textbox, .gr-file, .gr-slider, .gr-accordion, .gr-examples {
+    --block-background-fill: transparent !important;
 }
 
-/* ===== 策略卡片 ===== */
-.strat-grid {
-    display: grid !important;
-    grid-template-columns: repeat(4, 1fr) !important;
-    gap: 10px !important;
-    margin: 10px 0 16px !important;
+textarea, input, .gradio-container textarea, .gradio-container input {
+    font-family: 'Noto Serif TC', 'Microsoft JhengHei', serif !important;
 }
 
-.strat-card {
-    background: #5a554e !important;
-    border: 1.5px solid #756d63 !important;
-    border-radius: 10px !important;
-    padding: 10px 12px !important;
-    cursor: pointer !important;
-    transition: border-color .15s, box-shadow .15s, background .15s !important;
-    text-align: left !important;
-    width: 100% !important;
-    color: #fffaf0 !important;
+.gr-textbox label, .gr-file label, .gr-slider label {
+    color: #3a2e1b !important;
+    font-size: 12px !important;
+    letter-spacing: .08em !important;
 }
 
-.strat-card:hover {
-    border-color: #2d6a4f !important;
-    background: #4d6458 !important;
-    box-shadow: 0 2px 8px rgba(45, 106, 79, .18) !important;
+.gr-textbox textarea,
+.gr-textbox input,
+textarea.scroll-hide,
+input[type='text'],
+input[type='password'] {
+    background: linear-gradient(180deg, rgba(29,38,55,.96), rgba(36,49,70,.94)) !important;
+    color: #f6efe3 !important;
+    border: 1px solid rgba(164, 137, 94, .55) !important;
+    border-radius: 16px !important;
+    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03) !important;
 }
 
-.strat-card.active {
-    border-color: #2d6a4f !important;
-    background: #2d6a4f !important;
-    box-shadow: 0 2px 10px rgba(45, 106, 79, .25) !important;
+.gr-textbox textarea::placeholder,
+.gr-textbox input::placeholder,
+textarea::placeholder,
+input::placeholder {
+    color: #b9b3aa !important;
 }
 
-.strat-icon { font-size: 20px !important; margin-bottom: 4px !important; }
-.strat-name { font-size: 13px !important; font-weight: 900 !important; color: #fffaf0 !important; margin: 0 0 2px !important; }
-.strat-desc { font-size: 11px !important; color: #eee4d6 !important; line-height: 1.4 !important; }
-
-/* ===== 按鈕 ===== */
-button,
-.gradio-container button {
-    font-weight: 800 !important;
+.gr-textbox textarea[disabled],
+.gr-textbox input[disabled],
+textarea[disabled],
+input[disabled] {
+    background: linear-gradient(180deg, rgba(58,53,47,.96), rgba(70,64,56,.94)) !important;
+    color: #f3ebdd !important;
     opacity: 1 !important;
 }
 
-#ask-btn {
-    background: #2d6a4f !important;
-    color: #ffffff !important;
-    border: 0 !important;
-    border-radius: 8px !important;
+.gr-file {
+    background: rgba(255, 251, 243, .75) !important;
+    border: 1px dashed rgba(147,117,69,.45) !important;
+    border-radius: 16px !important;
+    padding: 6px !important;
 }
 
-#apply-key-btn {
-    background: #b87a1a !important;
-    color: #ffffff !important;
-    border: 0 !important;
-    border-radius: 8px !important;
+.gr-accordion {
+    border: 1px solid rgba(147,117,69,.30) !important;
+    border-radius: 16px !important;
+    overflow: hidden !important;
+    background: rgba(255,250,242,.78) !important;
+}
+.gr-accordion summary {
+    background: linear-gradient(180deg, rgba(248,240,225,.95), rgba(241,232,213,.94)) !important;
+    color: #26324a !important;
+    font-weight: 700 !important;
 }
+.gr-accordion .label-wrap span { color: #26324a !important; }
 
-/* Slider 與 Examples 區塊 */
-.gradio-container .wrap,
-.gradio-container .examples,
-.gradio-container table {
-    background: #fbf7ee !important;
-    color: #1f1b16 !important;
+.gr-examples {
+    background: rgba(255,251,243,.72) !important;
+    border: 1px solid rgba(147,117,69,.25) !important;
+    border-radius: 16px !important;
+    padding: 10px 12px !important;
+}
+.gr-examples .label-wrap span,
+.gr-examples .label-wrap label {
+    color: #7b6238 !important;
+    font-weight: 700 !important;
+}
+.gr-examples button {
+    background: rgba(255,247,230,.96) !important;
+    border: 1px solid rgba(184,138,66,.30) !important;
+    color: #4f4334 !important;
+    border-radius: 12px !important;
+}
+.gr-examples button:hover {
+    border-color: #b88a42 !important;
+    color: #26324a !important;
+}
+
+input[type='range'] { accent-color: #b88a42 !important; }
+
+@media (max-width: 980px) {
+    .strat-grid { grid-template-columns: repeat(2, 1fr); }
+    .hdr-title { font-size: 28px; }
+    #hdr { padding: 24px 22px; }
+}
+@media (max-width: 640px) {
+    .strat-grid { grid-template-columns: 1fr; }
+    .sec-label { font-size: 13px; letter-spacing: .16em; }
+    .hdr-title { font-size: 24px; }
+    #hdr::after { display: none; }
 }
 """
 
 HEADER_HTML = """
 <div id="hdr">
-  <div class="hdr-eyebrow">Intelligent Document Analysis · v2</div>
-  <div class="hdr-title">多策略 RAG 文件問答系統</div>
-  <div class="hdr-sub">支援 PDF / DOCX 上傳，採用 ChromaDB 持久化向量資料庫與 8 種 RAG 檢索策略</div>
-  <div>
+  <div class="hdr-eyebrow">Arcane Archive · Multi-Strategy Retrieval</div>
+  <div class="hdr-title">墨境卷宗｜多策略 RAG 文件問答系統</div>
+  <div class="hdr-sub">以「古卷、夜藍、鎏金、紙墨」為視覺核心，重塑你的文件問答介面。支援 PDF / DOCX 上傳，採用 ChromaDB 持久化向量資料庫與 8 種 RAG 檢索策略。</div>
+  <div class="hdr-quote">殿堂、工廠、流浪船、試煉之地 —— 每一次檢索，都是穿越文件迷霧的航行。</div>
+  <div class="hdr-pills">
+    <span class="pill pill-dark">▸ 多策略檢索</span>
     <span class="pill">▸ Groq API</span>
     <span class="pill">▸ llama-3.1-8b-instant</span>
-    <span class="pill pill-amber">▸ ChromaDB</span>
-    <span class="pill pill-amber">▸ PDF / DOCX</span>
+    <span class="pill">▸ ChromaDB</span>
+    <span class="pill">▸ PDF / DOCX</span>
     <span class="pill">▸ SentenceTransformers</span>
   </div>
 </div>
@@ -700,8 +784,10 @@ def create_interface():
             # ── 左欄 ──────────────────���───────────────
             with gr.Column(scale=1, min_width=320, elem_classes="card-box"):
 
+                gr.HTML("<div class='sub-note'>以金紋卷軸風格整理左側控制面板：先點亮金鑰，再載入卷宗，最後挑選檢索術式。</div>")
+
                 # ★ Step 00：API Key 輸入（新增）
-                gr.HTML("<div class='sec-label'>Step 00 · Groq API Key</div>")
+                gr.HTML("<div class='sec-label'>Step 00 · 啟封金鑰</div>")
                 with gr.Group(elem_id="apikey-box"):
                     api_key_input = gr.Textbox(
                         label="Groq API Key",
@@ -718,18 +804,18 @@ def create_interface():
                         value="✓ API Key 已從環境變數載入" if env_key else "⚠ 尚未設定 API Key",
                         interactive=False,
                         lines=1,
-                        label="API Key 狀態",
+                        label="金鑰狀態",
                         show_label=False,
                     )
 
                 # Step 01：上傳文件
-                gr.HTML("<div class='sec-label'>Step 01 · 上傳文件</div>")
-                file_input = gr.File(label="PDF / DOCX", file_types=[".pdf", ".docx"])
-                load_btn = gr.Button("↑ 載入文件")
-                status = gr.Textbox(label="狀態", interactive=False, lines=3)
+                gr.HTML("<div class='sec-label'>Step 01 · 載入卷宗</div>")
+                file_input = gr.File(label="上傳卷宗（PDF / DOCX）", file_types=[".pdf", ".docx"])
+                load_btn = gr.Button("↑ 載入卷宗")
+                status = gr.Textbox(label="卷宗狀態", interactive=False, lines=3)
 
                 # Step 02：RAG 策略
-                gr.HTML("<div class='sec-label'>Step 02 · 選擇 RAG 策略</div>")
+                gr.HTML("<div class='sec-label'>Step 02 · 選擇檢索術式</div>")
                 gr.HTML(build_strategy_menu("semantic"))
                 strategy_input = gr.Textbox(
                     value="semantic",
@@ -738,26 +824,27 @@ def create_interface():
                     visible=False,
                 )
                 strategy_status = gr.Textbox(
-                    value="✓ 已選擇策略：語意搜尋",
+                    value="✓ 已選擇術式：語意搜尋",
                     interactive=False,
                     lines=1,
-                    label="目前策略",
+                    label="目前術式",
                 )
                 gr.HTML(STRATEGY_MENU_JS)
 
                 # Step 03：參數
-                gr.HTML("<div class='sec-label'>Step 03 · 搜尋參數</div>")
-                topk = gr.Slider(minimum=1, maximum=10, value=3, step=1, label="Top-K 片段數量")
+                gr.HTML("<div class='sec-label'>Step 03 · 檢索參數</div>")
+                topk = gr.Slider(minimum=1, maximum=10, value=3, step=1, label="Top-K 檢索片段數量")
 
             # ── 右欄：問答 ────────────────────────────
             with gr.Column(scale=2, elem_classes="card-box"):
-                gr.HTML("<div class='sec-label'>Step 04 · 輸入問題</div>")
+                gr.HTML("<div class='sub-note'>右側為提問主場域。介面配色改為夜藍輸入框與紙本質地背景，營造海報式卷宗氛圍。</div>")
+                gr.HTML("<div class='sec-label'>Step 04 · 發問</div>")
                 qin = gr.Textbox(
                     label="問題",
                     placeholder="例如：這份文件的核心論點是什麼？",
                     lines=4,
                 )
-                ask_btn = gr.Button("提問", variant="primary", size="lg", elem_id="ask-btn")
+                ask_btn = gr.Button("開始提問", variant="primary", size="lg", elem_id="ask-btn")
 
                 gr.HTML("<div class='sec-label'>AI 回答</div>")
                 ans = gr.Textbox(label="AI 回答內容", lines=12, interactive=False)