chore: 回退语音按钮为纯HTML圆形按钮 + 修复思考框/嵌套边框/营养报告布局

ui/app_builder.py

@@ -14,6 +14,7 @@ PregoPal - Gradio 界面构建（现代UI版）
 
 import datetime
 import gradio as gr
+import time
 
 from modules.voiceprint import VoiceprintManager
 from modules.meal_recommender import MealRecommender
@@ -39,6 +40,30 @@ diet_logger = DietLogger()
 nutrition_analyzer = NutritionAnalyzer()
 
 
+# ============================================================
+# 语音会话入口（pass 占位，待 Llama 模型接入）
+# ============================================================
+async def start_voice_session(audio_data: str, lang: str = "zh") -> dict:
+    """
+    语音会话入口（当前 pass 占位，待接入 Llama 大模型）
+
+    Args:
+        audio_data: Gradio Audio 组件返回的文件路径 (str)
+        lang: 语言标识 "zh" / "en"
+
+    Returns:
+        dict: {
+            "text": str,           # ASR 转写文本
+            "response": str,       # AI 回复文本
+            "speaker": str,        # 识别出的说话人
+            "audio_response": bytes | None  # TTS 音频（可选）
+        }
+    """
+    # TODO: 接入 Llama 模型后替换此函数体
+    # 当前 pass 占位，返回空结果避免报错
+    pass
+
+
 # ============================================================
 # 工具：首页语言文本
 # ============================================================
@@ -49,7 +74,7 @@ def _home_texts(lang):
             "title": "# 🌸 欢迎来到 PregoPal",
             "subtitle": "### 你的孕期AI伴侣，时刻陪伴在你身边",
             "tap_speak": "🎙️ 点击说话",
-            "tap_hint": "全双工语音交互，边说边听",
+            "tap_hint": "🎤 点击开始聊天",
             "trimester_label": "孕期阶段",
             "nutrition_focus": "营养关注",
             "today_diet": "昨日饮食",
@@ -57,6 +82,7 @@ def _home_texts(lang):
             "weight_label": "体重管理",
             "thinking_label": "🤔 AI 思考中...",
             "thinking_placeholder": "等待对话中...",
+            "thinking_waiting": "等待对话中...",
             "recent_title": "最近的饮食记录",
             "meal_count_unit": "餐",
             "no_data": "暂无数据",
@@ -69,7 +95,7 @@ def _home_texts(lang):
             "title": "# 🌸 Welcome to PregoPal",
             "subtitle": "### Your AI pregnancy companion, always by your side",
             "tap_speak": "🎙️ Tap to Speak",
-            "tap_hint": "Full-duplex voice interaction",
+            "tap_hint": "🎤 Tap to talk",
             "trimester_label": "Trimester",
             "nutrition_focus": "Nutrition Focus",
             "today_diet": "Yesterday's Diet",
@@ -77,6 +103,7 @@ def _home_texts(lang):
             "weight_label": "Weight",
             "thinking_label": "🤔 AI Thinking...",
             "thinking_placeholder": "Waiting for conversation...",
+            "thinking_waiting": "Waiting for conversation...",
             "recent_title": "Recent Diet Records",
             "meal_count_unit": " meals",
             "no_data": "No data",
@@ -163,7 +190,7 @@ def _home_content(loop, lang):
     if cards["weight_trend"]:
         weight_display += f" | {cards['weight_trend']}"
 
-    thinking_text = cards["thinking_keywords"] if cards["thinking_keywords"] else T["thinking_placeholder"]
+    thinking_text = cards["thinking_keywords"] if cards["thinking_keywords"] else T["thinking_waiting"]
 
     records = diet_logger.get_recent_records(days=3)
     recent_html = _render_recent_records_html(records, lang)
@@ -172,28 +199,38 @@ def _home_content(loop, lang):
         gr.Markdown(T["title"])
         gr.Markdown(T["subtitle"])
 
-        # 语音启动按钮（居中大圆形）
+        # 语音启动 — 粉色渐变圆形按钮（全双工语音交互入口）
         with gr.Row():
             with gr.Column(scale=1):
                 pass
             with gr.Column(scale=2):
                 gr.HTML(f"""
                 <div style="text-align: center; padding: 24px 0;">
-                    <button class="voice-main-btn"></button>
+                    <button class="voice-main-btn" style="
+                        width:160px;height:160px;border-radius:50%;
+                        background:linear-gradient(135deg,#FF6B8A 0%,#FF4081 100%);
+                        border:4px solid #FFF;
+                        box-shadow:0 8px 32px rgba(255,64,129,0.3);
+                        cursor:pointer;font-size:48px;color:white;
+                        transition:all 0.3s ease;"
+                        onmouseover="this.style.transform='scale(1.05)';this.style.boxShadow='0 12px 40px rgba(255,64,129,0.4)'"
+                        onmouseout="this.style.transform='scale(1)';this.style.boxShadow='0 8px 32px rgba(255,64,129,0.3)'"
+                    >
+                        🎙️
+                    </button>
                     <p style="margin-top: 8px; color: #999; font-size: 14px;">{T['tap_hint']}</p>
                 </div>
                 """)
             with gr.Column(scale=1):
                 pass
 
-        # AI 思考状态
-        gr.Textbox(
-            value=f"{T['thinking_label']}\n{thinking_text}",
-            label="",
-            interactive=False,
-            lines=2,
-            elem_classes=["thinking-box"],
-        )
+        # AI 思考状态 — 纯 HTML（无 Gradio textarea 灰色外壳）
+        gr.HTML(f"""
+        <div class="thinking-box">
+            <div style="font-weight:600;color:#6A1B9A;">{T['thinking_label']}</div>
+            <div style="color:#888;font-size:14px;margin-top:4px;">{thinking_text}</div>
+        </div>
+        """)
 
         # 卡片行 1
         with gr.Row():
@@ -232,12 +269,12 @@ def _home_content(loop, lang):
 # ============================================================
 def _family_content(lang):
     """家庭饮食习惯组件 — 纯展示模式"""
-    # Refresh state to force re-render
     with gr.Column(elem_classes=["glass-card"]):
         gr.Markdown(f"## {t('family_title', lang)}")
         gr.Markdown(f"*{t('family_subtitle', lang)}*")
 
-    with gr.Tabs():
+    # 默认选中第一个 Tab（家庭菜谱）
+    with gr.Tabs(selected=0):
         with gr.Tab(t("tab_recipes", lang)):
             recipes_html = gr.HTML(render_family_recipes_html(lang))
             refresh_recipe_btn = gr.Button(t("btn_refresh", lang), size="sm")
@@ -313,30 +350,47 @@ def _summary_content(lang):
 
 
 # ============================================================
-# Tab 4: 📈 营养报告（纯 HTML Dashboard，无 matplotlib 图片）
+# Tab 4: 📈 营养报告（纯 HTML Dashboard，自动生成）
 # ============================================================
 def _report_content(lang):
-    """营养报告组件 — 纯 HTML 可视化"""
-    with gr.Row():
-        with gr.Column(scale=1):
-            analysis_days = gr.Slider(
-                label=t("analysis_days", lang),
-                minimum=1, maximum=30, value=7, step=1,
-            )
-            generate_btn = gr.Button(t("btn_generate", lang), variant="primary")
+    """营养报告组件 — 纯 HTML 可视化，Slider 防抖自动生成"""
+    # 防抖时间戳
+    _last_change = [0.0]
+
+    with gr.Column():
+        # Slider 全宽
+        analysis_days = gr.Slider(
+            label=t("analysis_days", lang),
+            minimum=1, maximum=30, value=7, step=1,
+            interactive=True,
+        )
 
-        with gr.Column(scale=3):
-            report_dashboard = gr.HTML(
-                f'<div style="padding:40px;text-align:center;color:#bbb;font-size:16px;">'
-                f'点击左侧「生成报告」按钮查看分析</div>'
-            )
+        # 报告全宽
+        report_dashboard = gr.HTML(
+            f'<div style="padding:40px;text-align:center;color:#bbb;font-size:16px;">'
+            f'调整上方天数自动生成报告</div>'
+        )
 
     def generate_report(days):
         records = diet_logger.get_recent_records(days=int(days))
         analysis = nutrition_analyzer.analyze_diet(records)
         return render_nutrition_report_html(analysis, days=int(days), lang=lang)
 
-    generate_btn.click(fn=generate_report, inputs=[analysis_days], outputs=report_dashboard)
+    def on_slider_change(days):
+        """Slider 变化时防抖 0.8s 后生成报告"""
+        _last_change[0] = time.time()
+        # wait for debounce window
+        time.sleep(0.8)
+        # if another change happened during sleep, skip
+        if time.time() - _last_change[0] < 0.9:
+            return generate_report(days)
+        return gr.skip()
+
+    analysis_days.change(
+        fn=on_slider_change,
+        inputs=[analysis_days],
+        outputs=[report_dashboard],
+    )
 
 
 # ============================================================
@@ -354,14 +408,18 @@ def create_app(loop=None):
         # 语言状态
         lang_state = gr.State(value="zh")
 
-        # 顶部标题 + 语言切换
+        # 顶部标题 + 语言切换（含英文副标题 + Google Fonts 趣味字体）
         with gr.Row():
             with gr.Column(scale=4):
                 gr.HTML("""
                 <div style="text-align: left; padding: 8px 0;">
-                    <h1 style="margin: 0; font-size: 28px;">🌸 PregoPal</h1>
-                    <p style="color: #999; margin: 4px 0 0 0; font-size: 16px;">孕期陪护AI助手 — 温馨的家庭式伴侣</p>
+                    <h1 style="margin: 0; font-size: 28px; font-family: 'Nunito', 'Quicksand', system-ui, sans-serif;">🌸 PregoPal</h1>
+                    <p style="color: #999; margin: 4px 0 0 0; font-size: 16px; font-family: 'Nunito', 'Quicksand', system-ui, sans-serif;">
+                        孕期陪护AI助手 — 温馨的家庭式伴侣
+                        <br><span style="font-size: 14px; color: #bbb;">Pregnancy Companion AI — Your Cozy Family Partner</span>
+                    </p>
                 </div>
+                <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Quicksand:wght@400;500;600;700&display=swap" rel="stylesheet">
                 """)
             with gr.Column(scale=1, min_width=120):
                 lang_selector = gr.Radio(

utils.py

@@ -271,20 +271,35 @@ def render_family_preferences_html(lang="zh") -> str:
 def render_family_memories_html(lang="zh") -> str:
     """渲染家庭记忆为时间线"""
     from modules.family_manager import MemoryManager
-    memories = MemoryManager.load_all()
-    if not memories:
+    import re
+    data = MemoryManager.load_all()
+    if not any(data.values()):
         no = t("no_memories", lang)
         return f'<div style="padding:24px;text-align:center;color:#aaa;font-size:15px;">{no}</div>'
+    # 将 dict 展平为 (date, content) 列表
+    flat = []
+    for section_key, label in [("relationships", "关系"), ("events", "事件"), ("daily", "日常")]:
+        for line in data.get(section_key, []):
+            m = re.match(r'-\s*\*{0,2}(\d{4}-\d{2}-\d{2})\*{0,2}:?\s*(.+)', line)
+            if m:
+                flat.append((m.group(1), m.group(2)))
+            else:
+                # 无日期的行（如关系描述），用空日期
+                clean = re.sub(r'^-\s*\*{0,2}(.*?)\*{0,2}:?\s*', r'\1: ', line).strip()
+                flat.append(("", clean))
+    # 按日期排序（最新的在前），取最近10条
+    flat.sort(key=lambda x: x[0] if x[0] else "0000", reverse=True)
     items = ""
-    for m in memories[-10:]:
-        date = m.get("date", "")[-5:] if m.get("date") else ""
-        content = m.get("content", "") or m.get("title", "") or m.get("event", "")
+    for date_str, content in flat[:10]:
+        disp_date = date_str[-5:] if date_str else ""
         if not content: continue
         items += f"""
         <div style="display:flex;gap:12px;padding:8px 0;">
-            <div style="min-width:50px;font-size:13px;color:#E91E63;font-weight:500;">{date}</div>
+            <div style="min-width:50px;font-size:13px;color:#E91E63;font-weight:500;">{disp_date}</div>
             <div style="flex:1;background:#fff;border-radius:10px;padding:10px 14px;border:1px solid #f0f0f0;font-size:14px;color:#333;">{content}</div>
         </div>"""
+    if not items:
+        return f'<div style="padding:24px;text-align:center;color:#aaa;font-size:15px;">{t("no_memories", lang)}</div>'
     return f"""
     <div style="max-height:320px;overflow-y:auto;padding:4px 0;">
         {items}
@@ -364,7 +379,7 @@ def render_nutrition_report_html(analysis: dict, days: int, lang="zh") -> str:
             <div style="display:flex;justify-content:space-between;align-items:center;">
                 <div>
                     <div style="font-size:20px;font-weight:700;color:#880E4F;">📊 {t("report_overall", lang)}</div>
-                    <div style="color:#888;font-size:13px;margin-top:4px;">{days_str} · {total_days}t("report_days","").split("近")[0] if lang=="zh" else ""</div>
+                    <div style="color:#888;font-size:13px;margin-top:4px;">{days_str} · 共 {total_days} 天</div>
                 </div>
                 <div style="text-align:right;">
                     <div style="font-size:36px;font-weight:800;color:{bar_color};">{score}</div>
@@ -517,32 +532,17 @@ h1, h2, h3 {
     color: #555 !important;
 }
 
-/* AI Thinking Box */
-.thinking-box textarea {
+/* AI Thinking Box — div 版本（无 textarea 外壳） */
+.thinking-box {
     background: linear-gradient(135deg, #F3E5F5, #FFF) !important;
     border: 1px solid #E1BEE7 !important;
     border-radius: 12px !important;
+    padding: 12px 16px !important;
     font-size: 14px !important;
     color: #6A1B9A !important;
-    padding: 12px 16px !important;
 }
 
-/* 大圆形按钮（语音启动） */
-.voice-main-btn {
-    width: 160px !important;
-    height: 160px !important;
-    border-radius: 50% !important;
-    background: linear-gradient(135deg, #FF6B8A 0%, #FF4081 100%) !important;
-    border: 4px solid #FFF !important;
-    box-shadow: 0 8px 32px rgba(255, 64, 129, 0.3) !important;
-    cursor: pointer !important;
-    transition: all 0.3s ease !important;
-    font-size: 48px !important;
-    color: white !important;
-    display: inline-flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-}
+/* 语音按钮 — 纯 HTML 圆形按钮 hover/active 效果（主样式在 inline style 中） */
 .voice-main-btn:hover {
     transform: scale(1.05) !important;
     box-shadow: 0 12px 40px rgba(255, 64, 129, 0.4) !important;
@@ -561,6 +561,28 @@ input, textarea, .gr-textbox {
     border-radius: 12px !important;
 }
 
+/* 消除 Gradio Group 默认嵌套边框 */
+.gr-group, .gr-box {
+    border: none !important;
+    box-shadow: none !important;
+}
+.gr-group > .gr-box, 
+.gr-box > .gr-box {
+    border: none !important;
+    box-shadow: none !important;
+}
+
+/* 消除 Trimester 卡片 group 的双层边框 */
+.card-trimester.gr-group,
+.card-trimester .gr-box {
+    border: 1px solid #f0f0f0 !important;
+    border-radius: 16px !important;
+    box-shadow: 0 1px 8px rgba(0,0,0,0.04) !important;
+}
+.card-trimester.gr-group .gr-box {
+    border: none !important;
+}
+
 /* 响应式调整 */
 @media (max-width: 768px) {
     .voice-main-btn {