UI Structure Optimization: Split Pane & Empty State

assets/style.css

@@ -1,146 +1,216 @@
-/* Nordic Minimalism Theme for Pharma K */
+/* Nordic Minimalism Theme for Pharma K - Final Polish */
 
-/* Variables */
+/* -----------------------------------------------------------
+   1. Global Variables & Reset
+   ----------------------------------------------------------- */
 :root {
-    --primary-color: #008080; /* Teal 鸭翅绿 */
-    --primary-light: #E6F2F2;
+    --primary-color: #008080;
+    /* Teal */
+    --primary-dark: #005f5f;
     --text-main: #2C3E50;
-    --text-secondary: #7F8C8D;
-    --bg-main: #F8F9FA;
+    --text-light: #7F8C8D;
+    --bg-main: #F4F6F8;
+    /* Light gray-blue hue for depth */
     --card-bg: #FFFFFF;
-    --shadow-soft: 0 4px 20px rgba(0,0,0,0.05);
-    --radius-main: 12px;
+    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.05);
+    --border-radius: 12px;
+    --font-stack: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
 }
 
-/* Global Reset & Typography */
 .stApp {
     background-color: var(--bg-main);
-    font-family: 'PingFang SC', 'Microsoft YaHei', 'Inter', sans-serif;
+    font-family: var(--font-stack);
     color: var(--text-main);
 }
 
-/* Main Container Padding */
+/* -----------------------------------------------------------
+   2. Layout Constraints (Max Width)
+   ----------------------------------------------------------- */
 .block-container {
-    padding-top: 2rem;
-    padding-bottom: 5rem;
-    max-width: 1000px;
+    max-width: 1280px !important;
+    padding-top: 3rem !important;
+    padding-bottom: 5rem !important;
 }
 
-/* -------------------
-   Sidebar Styling
-   ------------------- */
-section[data-testid="stSidebar"] {
-    background-color: #FFFFFF;
-    border-right: 1px solid #EAEAEA;
-    box-shadow: 2px 0 10px rgba(0,0,0,0.02);
+/* -----------------------------------------------------------
+   3. Header Styling (Centered & Clean)
+   ----------------------------------------------------------- */
+.main-header {
+    text-align: center;
+    margin-bottom: 3rem;
+    background: transparent;
+    padding: 0;
 }
 
-section[data-testid="stSidebar"] .block-container {
-    padding-top: 2rem;
+.main-header h1 {
+    font-size: 2.2rem;
+    font-weight: 800;
+    color: var(--primary-color);
+    margin: 0;
+    letter-spacing: -0.02em;
 }
 
-/* Expander in Sidebar (for API Config) */
-.streamlit-expanderHeader {
-    background-color: transparent;
-    border: 1px solid #E0E0E0;
-    border-radius: 8px;
-    color: var(--text-main);
+.main-header p {
+    font-size: 1rem;
+    color: var(--text-light);
+    margin-top: 0.5rem;
     font-weight: 500;
 }
-.streamlit-expanderContent {
-    border: 1px solid #E0E0E0;
-    border-top: none;
-    border-radius: 0 0 8px 8px;
-    background-color: #FAFAFA;
+
+/* -----------------------------------------------------------
+   4. Column Cards (The "Paper" Look)
+   ----------------------------------------------------------- */
+/* 
+   We target the direct children of columns. 
+   Note: This selector usually works for the container inside a column 
+*/
+[data-testid="column"] {
+    background-color: var(--card-bg);
+    border-radius: var(--border-radius);
+    padding: 1.5rem !important;
+    box-shadow: var(--shadow-card);
+    border: 1px solid rgba(0, 0, 0, 0.03);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+/* Fix for nested columns (e.g. buttons) - Reset card style */
+[data-testid="column"] [data-testid="column"] {
+    background-color: transparent !important;
+    box-shadow: none !important;
+    border: none !important;
+    padding: 0 !important;
+    border-radius: 0 !important;
 }
 
-/* -------------------
-   Main Workbench Area
-   ------------------- */
+[data-testid="column"]:hover {
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
+    z-index: 10;
+}
 
-/* Header - Clean & Professional */
-h1 {
+/* Disable hover effect for nested columns */
+[data-testid="column"] [data-testid="column"]:hover {
+    box-shadow: none !important;
+    transform: none !important;
+}
+
+/* Adjust headings inside columns */
+[data-testid="column"] h3 {
+    font-size: 1.1rem !important;
     font-weight: 700 !important;
-    color: var(--primary-color) !important;
-    font-size: 2.2rem !important;
-    margin-bottom: 0.5rem !important;
-    letter-spacing: -0.5px;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid #eee;
+    margin-bottom: 1.5rem;
+    color: var(--text-main);
 }
 
-h2, h3 {
-    font-weight: 600 !important;
-    color: var(--text-main) !important;
+/* -----------------------------------------------------------
+   5. Sidebar Styling
+   ----------------------------------------------------------- */
+section[data-testid="stSidebar"] {
+    background-color: white;
+    border-right: 1px solid #eee;
 }
 
-/* Card Style Containers */
-.css-1r6slb0, .stTextArea, .stTextInput, .stFileUploader {
-    background: var(--card-bg);
-    border-radius: var(--radius-main);
+section[data-testid="stSidebar"] [data-testid="stMarkdownContainer"] h1 {
+    font-size: 1.2rem !important;
 }
 
-/* Input Fields */
-.stTextInput > div > div > input, .stTextArea > div > div > textarea {
-    background-color: #FFFFFF;
-    border: 1px solid #E0E0E0;
+/* -----------------------------------------------------------
+   6. Input Fields & Form Elements
+   ----------------------------------------------------------- */
+.stTextInput input,
+.stTextArea textarea,
+.stSelectbox div[data-baseweb="select"] {
+    background-color: #F9FAFB;
+    border: 1px solid #E5E7EB;
     border-radius: 8px;
-    padding: 10px 12px;
-    transition: all 0.3s ease;
+    color: var(--text-main);
+    font-size: 0.95rem;
 }
 
-.stTextInput > div > div > input:focus, .stTextArea > div > div > textarea:focus {
+.stTextInput input:focus,
+.stTextArea textarea:focus {
     border-color: var(--primary-color);
-    box-shadow: 0 0 0 2px rgba(0, 128, 128, 0.1);
+    box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.1);
+    background-color: white;
 }
 
-/* Buttons */
-.stButton > button {
-    background-color: var(--primary-color) !important;
-    color: white !important;
+/* -----------------------------------------------------------
+   7. Buttons
+   ----------------------------------------------------------- */
+/* Primary Action Button */
+button[kind="primary"] {
+    background: var(--primary-color) !important;
     border: none !important;
-    border-radius: 8px !important;
-    padding: 0.6rem 1.5rem !important;
-    font-weight: 600 !important;
-    box-shadow: 0 4px 12px rgba(0, 128, 128, 0.2) !important;
-    transition: all 0.2s ease !important;
+    box-shadow: 0 4px 6px rgba(0, 128, 128, 0.2);
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    padding: 0.6rem 1.2rem;
+    transition: all 0.2s;
 }
 
-.stButton > button:hover {
+button[kind="primary"]:hover {
+    background: var(--primary-dark) !important;
     transform: translateY(-1px);
-    box-shadow: 0 6px 16px rgba(0, 128, 128, 0.3) !important;
-    background-color: #006666 !important;
+    box-shadow: 0 6px 12px rgba(0, 128, 128, 0.25);
 }
 
-.stButton > button:active {
-    transform: translateY(1px);
+/* Secondary / Pill Buttons (Quick Actions) */
+/* Requires type="secondary" in logic */
+button[kind="secondary"] {
+    background: white !important;
+    border: 1px solid #E5E7EB !important;
+    color: var(--text-main) !important;
+    border-radius: 50px !important;
+    /* Pill shape */
+    font-size: 0.85rem !important;
+    padding: 0.25rem 0.75rem !important;
+    height: auto !important;
+    min-height: 2rem;
+    box-shadow: none !important;
 }
 
-/* Secondary Buttons (Outlined) */
-button[kind="secondary"] {
-    background-color: transparent !important;
-    border: 1px solid var(--primary-color) !important;
+button[kind="secondary"]:hover {
+    border-color: var(--primary-color) !important;
     color: var(--primary-color) !important;
-    box-shadow: none !important;
+    background-color: #F0FDFA !important;
+}
+
+/* -----------------------------------------------------------
+   8. Tabs
+   ----------------------------------------------------------- */
+.stTabs [data-baseweb="tab-list"] {
+    gap: 1rem;
+    border-bottom: 1px solid #eee;
+    margin-bottom: 1.5rem;
+}
+
+.stTabs [data-baseweb="tab"] {
+    height: 3rem;
+    font-weight: 500;
+    color: var(--text-light);
+    border: none;
+    background: transparent;
+}
+
+.stTabs [aria-selected="true"] {
+    color: var(--primary-color) !important;
+    border-bottom: 2px solid var(--primary-color) !important;
+    font-weight: 600;
+}
+
+/* -----------------------------------------------------------
+   9. Footer
+   ----------------------------------------------------------- */
+footer {
+    visibility: hidden;
 }
 
-/* Footer Branding */
-footer {visibility: hidden;}
 .pharma-k-footer {
+    border-top: 1px solid #eee;
+    padding-top: 2rem;
+    margin-top: 3rem;
     text-align: center;
-    padding: 40px 0;
-    color: var(--text-secondary);
-    font-size: 0.9rem;
-    border-top: 1px solid #EAEAEA;
-    margin-top: 60px;
-}
-
-/* -------------------
-   Report Area (Preview)
-   ------------------- */
-.report-preview-box {
-    background: white;
-    padding: 40px;
-    border-radius: 4px; /* A4 paper look */
-    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
-    border: 1px solid #EAEAEA;
-    margin-top: 20px;
-}
+    color: var(--text-light);
+    font-size: 0.85rem;
+}

streamlit_app.py

@@ -1091,31 +1091,38 @@ def main():
         
         st.markdown("---")
     
-    # ========== Main Header ==========
-    # ========== Main Header ==========
+    # ========== Main Header (Navbar Style) ==========
     st.markdown("""
-    <div class="main-header">
-        <h1>Pharma K 药物制剂相容性与稳定性分析专家系统</h1>
-        <p>Expert System for Drug Stability & Compatibility Analysis</p>
+    <div class="main-header" style="text-align: left !important; padding: 1rem 0 !important; margin-bottom: 2rem !important; border-bottom: 1px solid #eee;">
+        <div style="display: flex; align-items: center; justify-content: space-between;">
+            <div style="font-size: 1.5rem; font-weight: 700; color: #008080;">
+                Pharma K <span style="font-size: 0.9rem; font-weight: 400; color: #7F8C8D; margin-left: 10px;">专家系统</span>
+            </div>
+            <div style="font-size: 0.9rem; color: #7F8C8D;">
+                Next-Gen Drug Stability Analysis
+            </div>
+        </div>
     </div>
     """, unsafe_allow_html=True)
     
-    # Main content - Two columns
-    col_input, col_output = st.columns([1, 1.5])
+    # Main content - Split Pane Layout
+    col_input, col_output = st.columns([3.8, 6.2], gap="large")
     
     with col_input:
-        st.subheader("📋 输入信息")
+        st.markdown('<div class="nordic-card">', unsafe_allow_html=True) 
+        # (Note: CSS targeting [data-testid="column"] handles the card look, but we keep this comment for clarity)
+        st.subheader("📝 任务控制台")
         
         # Analysis mode tabs
         tab_compat, tab_stability, tab_general = st.tabs([
-            "🧬 相容性分析", "📊 稳定性分析", "❓ 通用问答"
+            "相容性", "稳定性", "问答"
         ])
         
         with tab_compat:
-            st.markdown("#### 药物-辅料相容性预测")
+            st.caption("预测药物分子与辅料的相容性风险")
             smiles = st.text_area(
-                "API SMILES 结构式",
-                placeholder="例如: CC(=O)Nc1ccc(O)cc1 (对乙酰氨基酚)",
+                "API SMILES",
+                placeholder="例如: CC(=O)Nc1ccc(O)cc1",
                 height=100,
                 key="smiles_input"
             )
@@ -1129,24 +1136,27 @@ def main():
             if smiles:
                 mol_renderer = get_molecule_renderer()
                 if mol_renderer and mol_renderer.is_available:
-                    svg = mol_renderer.render_2d_svg(smiles, 300, 200)
+                    svg = mol_renderer.render_2d_svg(smiles, 300, 150)
                     if svg:
-                        st.markdown("**分子结构预览:**")
                         st.markdown(svg, unsafe_allow_html=True)
             
-            compat_button = st.button("🔬 开始相容性分析", use_container_width=True, type="primary", key="compat_btn")
+            st.markdown("---")
+            compat_button = st.button("🚀 开始分析", use_container_width=True, type="primary", key="compat_btn")
         
         with tab_stability:
-            st.markdown("#### 稳定性数据分析")
+            st.caption("基于已有数据文件进行趋势与货架期分析")
             uploaded_files = st.file_uploader(
-                "上传稳定性数据文件",
+                "上传数据文件",
                 type=["xlsx", "xls", "docx", "doc", "pdf", "csv"],
                 accept_multiple_files=True,
-                key="stability_files"
+                key="stability_files",
+                label_visibility="collapsed"
             )
+            if not uploaded_files:
+                st.info("👆 请先上传稳定性数据文件")
             
             # Quick Action Chips
-            st.markdown('<div style="margin-bottom: 8px; font-size: 14px; font-weight: 500;">快捷分析目标</div>', unsafe_allow_html=True)
+            st.markdown('<div style="margin: 15px 0 8px; font-size: 13px; font-weight: 500; color: #666;">快捷指令</div>', unsafe_allow_html=True)
             chip_col1, chip_col2, chip_col3 = st.columns(3)
             
             def set_goal(text):
@@ -1156,37 +1166,62 @@ def main():
                 st.session_state.stability_goal_input = ""
                 
             with chip_col1:
-                st.button("📈 趋势分析", use_container_width=True, on_click=set_goal, args=("请分析各批次的杂质增长趋势，并判断是否符合限度要求。",))
+                st.button("📈 趋势", use_container_width=True, type="secondary", on_click=set_goal, args=("请分析各批次的杂质增长趋势，并判断是否符合限度要求。",))
             with chip_col2:
-                st.button("🔮 货架期预测", use_container_width=True, on_click=set_goal, args=("基于现有数据，请预测24个月时的含量及有关物质数据。",))
+                st.button("🔮 货架期", use_container_width=True, type="secondary", on_click=set_goal, args=("基于现有数据，请预测24个月时的含量数据。",))
             with chip_col3:
-                st.button("🏆 处方筛选", use_container_width=True, on_click=set_goal, args=("对比不同处方批次的稳定性数据，找出最稳定的处方。",))
+                st.button("🏆 筛选", use_container_width=True, type="secondary", on_click=set_goal, args=("对比不同处方批次，找出最稳定的处方。",))
             
             stability_goal = st.text_area(
-                "分析目标详情",
+                "详细分析目标",
                 value=st.session_state.stability_goal_input,
-                placeholder="请描述您想要进行的分析...\n或点击上方快捷按钮自动填充",
-                height=150,
-                key="stability_goal_input_area", # distinct key so we can sync manually if needed but value controls it
+                placeholder="或在此手动描述...",
+                height=100,
+                key="stability_goal_input_area",
                 on_change=lambda: st.session_state.update({"stability_goal_input": st.session_state.stability_goal_input_area})
             )
-
             
-            stability_button = st.button("📊 开始稳定性分析", use_container_width=True, type="primary", key="stability_btn")
+            st.markdown("---")
+            stability_button = st.button("🚀 开始分析", use_container_width=True, type="primary", key="stability_btn")
         
         with tab_general:
-            st.markdown("#### 制剂研发问答")
+            st.caption("制剂研发领域的专业问答助手")
             question = st.text_area(
-                "您的问题",
-                placeholder="请输入您关于药物稳定性、制剂研发的问题...\n例如:\n- ICH指南对稳定性试验有什么要求？\n- 如何评估药物与辅料的相容性？\n- 什么情况下需要进行加速稳定性试验？",
+                "问题描述",
+                placeholder="例如: ICH指南对稳定性试验有什么要求？",
                 height=150,
-                key="general_question"
+                key="general_question",
+                label_visibility="collapsed"
             )
             
-            general_button = st.button("💡 获取回答", use_container_width=True, type="primary", key="general_btn")
-    
+            st.markdown("---")
+            general_button = st.button("💡 咨询专家", use_container_width=True, type="primary", key="general_btn")
+            
     with col_output:
         st.subheader("📊 分析结果")
+        
+        # Determine if we have any active result
+        is_active = False
+        if compat_button or stability_button or general_button:
+            is_active = True
+        if st.session_state.get('analysis_type') == 'stability' and st.session_state.get('analysis_result'):
+            is_active = True
+            
+        # Empty State
+        if not is_active:
+            st.markdown("""
+            <div style="text-align: center; padding: 60px 20px; color: #999;">
+                <div style="font-size: 60px; margin-bottom: 20px;">🧬</div>
+                <h3 style="color: #666; margin-bottom: 10px;">准备就绪</h3>
+                <p>请在左侧选择分析模式并输入信息<br>AI 专家系统将为您生成专业报告</p>
+                <div style="margin-top: 30px; display: flex; justify-content: center; gap: 20px;">
+                    <div style="background: #f0f2f6; padding: 10px 20px; border-radius: 20px; font-size: 12px;">相容性预测</div>
+                    <div style="background: #f0f2f6; padding: 10px 20px; border-radius: 20px; font-size: 12px;">稳定性分析</div>
+                    <div style="background: #f0f2f6; padding: 10px 20px; border-radius: 20px; font-size: 12px;">专家问答</div>
+                </div>
+            </div>
+            """, unsafe_allow_html=True)
+            
         result_container = st.container()
         
         # Handle button clicks
@@ -1198,7 +1233,7 @@ def main():
                 elif not api_key:
                     st.warning("请在侧边栏配置 API Key")
                 else:
-                    with st.spinner("正在进行相容性分析..."):
+                    with st.spinner("正在解析分子结构并进行相容性推演..."):
                         html_report, _ = run_compatibility_analysis(
                             smiles=smiles,
                             excipient=excipient,
@@ -1206,152 +1241,83 @@ def main():
                             provider=provider
                         )
                     
-                    # Wrap with Pharma K branding
                     branded_report = wrap_report_with_branding(html_report, "相容性分析")
                     
-                    # Display report
-                    st.components.v1.html(branded_report, height=800, scrolling=True)
-                    
-                    # Download buttons
-                    col_html, col_pdf = st.columns(2)
-                    with col_html:
-                        st.download_button(
-                            label="📥 下载 HTML 报告",
-                            data=branded_report,
-                            file_name=f"Pharma_K_相容性分析报告_{smiles[:10]}_{excipient}.html",
-                            mime="text/html",
-                            use_container_width=True
-                        )
-                    with col_pdf:
+                    # Toolbar (Download Buttons)
+                    c1, c2, c3 = st.columns([2, 1, 1])
+                    with c2:
+                        st.download_button("📥 HTML", branded_report, f"Pharma_K_Compat_{smiles[:5]}.html", "text/html")
+                    with c3:
                         pdf_data = generate_pdf_from_html(branded_report)
                         if pdf_data:
-                            st.download_button(
-                                label="📄 下载 PDF 报告",
-                                data=pdf_data,
-                                file_name=f"Pharma_K_相容性分析报告_{smiles[:10]}_{excipient}.pdf",
-                                mime="application/pdf",
-                                use_container_width=True
-                            )
-                        else:
-                            st.info("💡 PDF导出需要安装 weasyprint 或 pdfkit")
+                            st.download_button("📄 PDF", pdf_data, f"Pharma_K_Compat_{smiles[:5]}.pdf", "application/pdf")
+                    
+                    st.components.v1.html(branded_report, height=800, scrolling=True)
             
-            # Stability Analysis
+            # Stability Analysis Logic
             elif stability_button:
-                if not uploaded_files or not stability_goal:
-                    st.warning("请上传数据文件并描述分析目标")
+                if not uploaded_files or not st.session_state.stability_goal_input:
+                     st.warning("请上传数据文件并描述分析目标")
                 elif not api_key:
-                    st.warning("请在侧边栏配置 API Key")
+                     st.warning("请在侧边栏配置 API Key")
                 else:
-                    with st.spinner("正在进行稳定性分析..."):
-                        html_report = run_stability_analysis(
-                            goal=stability_goal,
-                            files=uploaded_files,
-                            api_key=api_key,
-                            provider=provider
-                        )
-                    
-                    # Check if report has content
-                    if html_report and len(html_report.strip()) > 100:
-                        # Wrap with Pharma K branding
-                        branded_report = wrap_report_with_branding(html_report, "稳定性分析")
-                        
-                        # Ensure chart data is rendered (in case it wasn't processed earlier)
-                        branded_report = parse_and_render_charts(branded_report)
-                        
-                        st.session_state.analysis_result = branded_report
-                        st.session_state.analysis_type = "stability"
-                        # Force page rerun to display results
-                        st.rerun()
-                    else:
-                        st.error("分析返回空结果，请检查 API 配置或重试")
-            
+                     with st.spinner("正在进行多维度稳定性数据分析..."):
+                         html_report = run_stability_analysis(
+                             goal=st.session_state.stability_goal_input,
+                             files=uploaded_files,
+                             api_key=api_key,
+                             provider=provider
+                         )
+                     
+                     if html_report and len(html_report.strip()) > 100:
+                         branded_report = wrap_report_with_branding(html_report, "稳定性分析")
+                         branded_report = parse_and_render_charts(branded_report)
+                         st.session_state.analysis_result = branded_report
+                         st.session_state.analysis_type = "stability"
+                         st.rerun()
+                     else:
+                         st.error("分析未返回有效结果")
+
             # Display stability analysis result from session state
-            if st.session_state.analysis_type == "stability" and st.session_state.analysis_result:
+            if st.session_state.get('analysis_type') == "stability" and st.session_state.get('analysis_result'):
                 branded_report = st.session_state.analysis_result
                 
-                # Display report
-                st.components.v1.html(branded_report, height=800, scrolling=True)
-                
-                # Download buttons
-                col_html, col_pdf = st.columns(2)
-                with col_html:
-                    st.download_button(
-                        label="📥 下载 HTML 报告",
-                        data=branded_report,
-                        file_name=f"Pharma_K_稳定性分析报告_{datetime.now().strftime('%Y%m%d_%H%M')}.html",
-                        mime="text/html",
-                        use_container_width=True,
-                        key="stability_html_download"
-                    )
-                with col_pdf:
+                # Toolbar
+                c1, c2, c3 = st.columns([2, 1, 1])
+                with c1:
+                    st.success("✅ 分析完成")
+                with c2:
+                    st.download_button("📥 HTML", branded_report, "Stability_Report.html", "text/html")
+                with c3:
                     pdf_data = generate_pdf_from_html(branded_report)
                     if pdf_data:
-                        st.download_button(
-                            label="📄 下载 PDF 报告",
-                            data=pdf_data,
-                            file_name=f"Pharma_K_稳定性分析报告_{datetime.now().strftime('%Y%m%d_%H%M')}.pdf",
-                            mime="application/pdf",
-                            use_container_width=True,
-                            key="stability_pdf_download"
-                        )
-                    else:
-                        st.info("💡 PDF导出需要安装 weasyprint 或 pdfkit")
+                        st.download_button("📄 PDF", pdf_data, "Stability_Report.pdf", "application/pdf")
+                
+                st.components.v1.html(branded_report, height=800, scrolling=True)
             
             # General Q&A
             elif general_button:
                 if not question:
-                    st.warning("请输入您的问题")
+                    st.warning("请输入问题")
                 elif not api_key:
-                    st.warning("请在侧边栏配置 API Key")
+                    st.warning("请配置 API Key")
                 else:
-                    with st.spinner("正在生成回答..."):
-                        html_response = run_general_analysis(
-                            question=question,
-                            api_key=api_key,
-                            provider=provider
-                        )
+                    with st.spinner("专家系统正在思考..."):
+                        html_response = run_general_analysis(question, api_key, provider)
                     
-                    # Wrap with Pharma K branding
                     branded_response = wrap_report_with_branding(html_response, "专家问答")
                     
-                    # Display response
-                    st.components.v1.html(branded_response, height=600, scrolling=True)
-                    
-                    # Download buttons
-                    col_html, col_pdf = st.columns(2)
-                    with col_html:
-                        st.download_button(
-                            label="📥 下载 HTML",
-                            data=branded_response,
-                            file_name=f"Pharma_K_问答_{datetime.now().strftime('%Y%m%d_%H%M')}.html",
-                            mime="text/html",
-                            use_container_width=True
-                        )
-                    with col_pdf:
+                    # Toolbar
+                    c1, c2, c3 = st.columns([2, 1, 1])
+                    with c2:
+                        st.download_button("📥 HTML", branded_response, "QA_Response.html", "text/html")
+                    with c3:
                         pdf_data = generate_pdf_from_html(branded_response)
                         if pdf_data:
-                            st.download_button(
-                                label="📄 下载 PDF",
-                                data=pdf_data,
-                                file_name=f"Pharma_K_问答_{datetime.now().strftime('%Y%m%d_%H%M')}.pdf",
-                                mime="application/pdf",
-                                use_container_width=True
-                            )
-                        else:
-                            st.info("💡 PDF导出需安装 weasyprint")
+                            st.download_button("📄 PDF", pdf_data, "QA_Response.pdf", "application/pdf")
+                            
+                    st.components.v1.html(branded_response, height=600, scrolling=True)
             
-            else:
-                # Default placeholder
-                st.markdown("""
-                <div style="text-align: center; padding: 100px 20px; color: #6b7280;">
-                    <h3>👆 请在左侧选择分析类型并输入信息</h3>
-                    <p style="margin-top: 20px;">
-                        系统支持三种分析模式：<br/>
-                        <strong>相容性分析</strong> | <strong>稳定性分析</strong> | <strong>通用问答</strong>
-                    </p>
-                </div>
-                """, unsafe_allow_html=True)
-
 # =============================================================================
 # Entry Point
 # =============================================================================