ui_templates.py

# ui_templates.py

def create_translation_card(tribe, source_text, target_text, confidence_level="high", confidence_desc="一般生活簡單句"):
    """一般翻譯結果卡片 (完美四宮格版 + 信心值描述優化版)"""
    # 建立信心等級映射表
    level_map = {"high": "高", "medium": "中", "low": "低"}
    level_text = level_map.get(confidence_level, "高")
    
    color_map = {"high": "#00B900", "medium": "#F4B400", "low": "#DB4437"}
    indicator_color = color_map.get(confidence_level, "#00B900")
    
    # 整合顯示文字：● 信心值：高（一般生活簡單句）
    full_info_text = f"● 信心值：{level_text}（{confidence_desc}）"
    
    return {
        "type": "bubble",
        "size": "kilo",
        "body": {
            "type": "box", "layout": "vertical", "spacing": "md",
            "contents": [
                {"type": "text", "text": f"🏹 {tribe}語翻譯小幫手", "weight": "bold", "color": "#8B0000", "size": "md"},
                {"type": "separator"},
                {"type": "text", "text": "原文內容", "color": "#aaaaaa", "size": "xs", "margin": "md"},
                {"type": "text", "text": source_text, "wrap": True, "size": "md"},
                {"type": "text", "text": "翻譯結果", "color": "#8B0000", "size": "xs", "margin": "md"},
                {"type": "text", "text": target_text, "wrap": True, "size": "xl", "weight": "bold", "color": "#000000"},
                {"type": "box", "layout": "horizontal", "margin": "md", "contents": [
                    {"type": "text", "text": full_info_text, "color": indicator_color, "size": "xs", "flex": 0},
                    {"type": "text", "text": " | AI 深度翻譯引擎檢索", "color": "#aaaaaa", "size": "xs", "margin": "sm"}
                ]}
            ]
        },
        "footer": {
            "type": "box", "layout": "vertical", "spacing": "sm",
            "contents": [
                {"type": "box", "layout": "horizontal", "spacing": "sm", "contents": [
                    {
                        "type": "button", "style": "primary", "color": "#00B900", "height": "sm", "flex": 1,
                        "action": {"type": "message", "label": "🔊 聽發音", "text": f"🔊 聽發音：{target_text}"}
                    },
                    {
                        "type": "button", "style": "primary", "color": "#2B579A", "height": "sm", "flex": 1,
                        "action": {"type": "message", "label": "💡 語法分析", "text": f"💡 語法分析：{target_text}"}
                    }
                ]},
                {"type": "box", "layout": "horizontal", "spacing": "sm", "contents": [
                    {
                        "type": "button", "style": "secondary", "height": "sm", "flex": 1,
                        "action": {"type": "message", "label": "🧠 深度翻譯", "text": f"🧠 深度翻譯：{source_text} | {target_text}"}
                    },
                    {
                        "type": "button", "style": "secondary", "height": "sm", "flex": 1,
                        "action": {"type": "message", "label": "⚙️ 切換族語", "text": "選單"}
                    }
                ]},
                {"type": "box", "layout": "horizontal", "spacing": "sm", "margin": "md", "contents": [
                    {
                        "type": "button", "style": "link", "height": "sm", "color": "#2B579A",
                        "action": {"type": "postback", "label": "👍 翻譯準確", "data": "feedback_good"}
                    },
                    {
                        "type": "button", "style": "link", "height": "sm", "color": "#DB4437",
                        "action": {"type": "postback", "label": "👎 需要改進", "data": "feedback_bad"}
                    }
                ]}
            ]
        }
    }

def create_download_button(download_url):
    """小巧的音檔儲存按鈕卡片"""
    return {
        "type": "bubble", "size": "micro",
        "body": {
            "type": "box", "layout": "vertical", "paddingAll": "10px",
            "contents": [
                {
                    "type": "button",
                    "action": {"type": "uri", "label": "💾 儲存音檔", "uri": f"{download_url}?openExternalBrowser=1"},
                    "style": "secondary", "height": "sm"
                }
            ]
        }
    }

def create_tribe_menu():
    """族語選擇大選單 (Carousel)"""
    group1 = ["阿美", "泰雅", "排灣", "布農", "卑南", "魯凱", "鄒", "賽夏"]
    group2 = ["雅美", "邵", "噶瑪蘭", "太魯閣", "撒奇萊雅", "賽德克", "拉阿魯哇", "卡那卡那富"]

    def build_grid_body(tribes, header_color):
        rows = []
        for i in range(0, len(tribes), 2):
            row = {
                "type": "box", "layout": "horizontal", "spacing": "sm",
                "contents": [
                    {"type": "button", "style": "secondary", "height": "sm", "action": {"type": "message", "label": tribes[i], "text": f"📍 切換族語：{tribes[i]}"}},
                    {"type": "button", "style": "secondary", "height": "sm", "action": {"type": "message", "label": tribes[i+1], "text": f"📍 切換族語：{tribes[i+1]}"}}
                ]
            }
            rows.append(row)
        return {"type": "box", "layout": "vertical", "spacing": "sm", "paddingAll": "md", "contents": rows}

    return {"type": "carousel", "contents": [
        {"type": "bubble", "size": "mega", "header": {"type": "box", "layout": "vertical", "contents": [{"type": "text", "text": "✨ 選擇族語 (1/2)", "weight": "bold", "color": "#FFFFFF", "align": "center"}], "backgroundColor": "#8B0000"}, "body": build_grid_body(group1, "#8B0000")},
        {"type": "bubble", "size": "mega", "header": {"type": "box", "layout": "vertical", "contents": [{"type": "text", "text": "✨ 選擇族語 (2/2)", "weight": "bold", "color": "#FFFFFF", "align": "center"}], "backgroundColor": "#2B579A"}, "body": build_grid_body(group2, "#2B579A")}
    ]}

def create_welcome_carousel(hero_image_url):
    """初次加入好友的迎賓教學卡片"""
    card_features = {
        "type": "bubble", "size": "mega",
        "header": {
            "type": "box", "layout": "vertical", "contents": [{"type": "text", "text": "✨ 16族智慧翻譯小幫手", "weight": "bold", "color": "#8B0000", "size": "md", "align": "center"}]
        },
        "hero": {"type": "image", "url": hero_image_url, "size": "full", "aspectRatio": "20:11", "aspectMode": "cover"},
        "body": {
            "type": "box", "layout": "vertical", "spacing": "sm",
            "contents": [
                {"type": "text", "text": "全方位 AI 核心功能", "weight": "bold", "size": "md", "color": "#8B0000"},
                {"type": "separator", "margin": "sm"},
                {"type": "text", "text": "📝 雙向文字互譯：支援中文與16族語", "size": "sm", "wrap": True, "margin": "md"},
                {"type": "text", "text": "🎬 多媒體辨識：支援「語音、圖片、影片」自動解析", "size": "sm", "wrap": True},
                {"type": "text", "text": "💡 深度語法分析：拆解詞根、功能詞與句型", "size": "sm", "wrap": True},
                {"type": "text", "text": "🔊 擬真原音重現：一鍵生成並下載語音", "size": "sm", "wrap": True}
            ]
        }
    }

    card_sop = {
        "type": "bubble", "size": "mega",
        "header": {
            "type": "box", "layout": "vertical", "contents": [{"type": "text", "text": "🚀 快速上手指南", "weight": "bold", "color": "#2B579A", "size": "md", "align": "center"}]
        },
        "body": {
            "type": "box", "layout": "vertical", "spacing": "lg",
            "contents": [
                {"type": "box", "layout": "horizontal", "contents": [{"type": "text", "text": "1", "weight": "bold", "color": "#2B579A", "flex": 1}, {"type": "text", "text": "點擊下方「切換專屬族語」設定語言", "size": "sm", "flex": 9}]},
                {"type": "box", "layout": "horizontal", "contents": [{"type": "text", "text": "2", "weight": "bold", "color": "#2B579A", "flex": 1}, {"type": "text", "text": "傳送文字、語音或課本照片給機器人", "size": "sm", "flex": 9}]},
                {"type": "box", "layout": "horizontal", "contents": [{"type": "text", "text": "3", "weight": "bold", "color": "#2B579A", "flex": 1}, {"type": "text", "text": "點擊「構詞語法分析」看深度結構解析", "size": "sm", "flex": 9}]}
            ]
        },
        "footer": {
            "type": "box", "layout": "vertical", "spacing": "sm",
            "contents": [
                {"type": "button", "action": {"type": "message", "label": "⚙️ 開始設定族語", "text": "切換族語"}, "style": "primary", "color": "#2B579A"},
                {"type": "button", "action": {"type": "message", "label": "👋 測試翻譯：你好", "text": "你好"}, "style": "secondary"}
            ]
        }
    }
    return {"type": "carousel", "contents": [card_features, card_sop]}

def create_feedback_card():
    """專屬「意見回饋」精緻卡片 (視覺完全統一版)"""
    return {
        "type": "bubble", "size": "mega",
        "header": {
            "type": "box", "layout": "vertical", "backgroundColor": "#F8F9FA",
            "contents": [{"type": "text", "text": "📩 意見回饋與優化", "weight": "bold", "color": "#8B0000", "size": "md"}]
        },
        "body": {
            "type": "box", "layout": "vertical", "spacing": "md",
            "contents": [
                {"type": "text", "text": "您的每一份建議，都是我們精進 AI 模型、傳承族語文化的動力。", "size": "sm", "wrap": True, "color": "#666666"},
                {"type": "separator"},
                {"type": "text", "text": "💡 請選擇留言方式：", "weight": "bold", "size": "sm", "color": "#2B579A"},
                {"type": "text", "text": "手機用戶推薦使用「一鍵留言」，電腦用戶請點選「手動輸入」。", "size": "xs", "wrap": True, "color": "#666666"}
            ]
        },
        "footer": {
            "type": "box", "layout": "vertical", "spacing": "sm",
            "contents": [
                # 1. 手機版按鈕 (自定義 Box)
                {
                    "type": "box", "layout": "vertical", "backgroundColor": "#8B0000", "cornerRadius": "md", "height": "40px", "justifyContent": "center",
                    "action": {
                        "type": "postback", "label": "📱 手機：一鍵彈出鍵盤", "data": "action=open_keyboard",
                        "inputOption": "openKeyboard", "fillInText": "建議："
                    },
                    "contents": [{"type": "text", "text": "📱 手機：一鍵彈出鍵盤", "color": "#FFFFFF", "align": "center", "weight": "bold", "size": "md"}]
                },
                # 2. 電腦版按鈕 (自定義 Box)
                {
                    "type": "box", "layout": "vertical", "backgroundColor": "#BCBFC2", "cornerRadius": "md", "height": "40px", "justifyContent": "center",
                    "action": {
                        "type": "message", "label": "💻 電腦：點此手動輸入", "text": "我要留言"
                    },
                    "contents": [{"type": "text", "text": "💻 電腦：點此手動輸入", "color": "#FFFFFF", "align": "center", "weight": "bold", "size": "md"}]
                },
                # 3. 測試範例按鈕 (自定義 Box)
                {
                    "type": "box", "layout": "vertical", "backgroundColor": "#FFFFA8", "cornerRadius": "md", "height": "40px", "justifyContent": "center",
                    "action": {
                        "type": "message", "label": "💡 點我一鍵測試範例", "text": "建議：希望未來可以增加更多語料內容！"
                    },
                    "contents": [{"type": "text", "text": "💡 點我一鍵測試範例", "color": "#000000", "align": "center", "weight": "bold", "size": "md"}]
                }
            ]
        }
    }
    
def create_glossing_intro_card(tribe="太魯閣"):
    """專屬：構詞語法分析 圖卡 (動態族語版)"""
    return {
        "type": "bubble",
        "size": "mega",
        "header": {
            "type": "box", "layout": "vertical", "backgroundColor": "#2B579A",
            # 🎯 動態標頭：顯示當前語別
            "contents": [{"type": "text", "text": f"🔬 {tribe}語 語法分析及說明", "weight": "bold", "color": "#FFFFFF", "size": "lg"}]
        },
        "body": {
            "type": "box", "layout": "vertical", "spacing": "md",
            "contents": [
                {"type": "text", "text": "這是一項偏向學術級的技術！AI 會將族語句子像「解剖」一樣，拆解成最基礎的零件：", "wrap": True, "size": "sm", "color": "#333333"},
                {"type": "box", "layout": "vertical", "backgroundColor": "#F8F9FA", "paddingAll": "md", "cornerRadius": "md", "spacing": "sm", "contents": [
                    {"type": "text", "text": "1️⃣ 原文：精準對齊每一個單字", "size": "xs", "weight": "bold", "color": "#2B579A"},
                    {"type": "text", "text": "2️⃣ 構詞：標出前綴、中綴 (如 t<m>abug)", "size": "xs", "weight": "bold", "color": "#2B579A"},
                    {"type": "text", "text": "3️⃣ 語法：功能性標記 (如 主事焦點)", "size": "xs", "weight": "bold", "color": "#2B579A"}
                ]},
                {"type": "text", "text": "這能幫助學習者真正看懂族語是怎麼組合成句子的！相信對您將有幫助。", "wrap": True, "size": "sm", "color": "#333333"}
            ]
        },
        "footer": {
            "type": "box", "layout": "vertical", "spacing": "sm",
            "contents": [
                # 🎯 統一中文範例：由 AI 根據當前 active 語別動態即時翻譯解析
                {"type": "button", "action": {"type": "message", "label": "💡 點我一鍵測試範例", "text": "💡 語法分析：我喜歡說族語。"}, "style": "primary", "color": "#2B579A"}
            ]
        }
    }

def create_deep_translation_intro_card(tribe="太魯閣"):
    """專屬：深度翻譯引擎 圖卡 (動態族語版)"""
    return {
        "type": "bubble",
        "size": "mega",
        "header": {
            "type": "box", "layout": "vertical", "backgroundColor": "#008000",
            # 🎯 動態標頭
            "contents": [{"type": "text", "text": f"🧠 {tribe}語 文化深度翻譯潤飾", "weight": "bold", "color": "#FFFFFF", "size": "lg"}]
        },
        "body": {
            "type": "box", "layout": "vertical", "spacing": "md",
            "contents": [
                {"type": "text", "text": "一般機器翻譯往往很生硬。我們在翻譯上導入了「RAG 檢索生成技術」！", "wrap": True, "size": "sm", "color": "#333333"},
                {"type": "box", "layout": "vertical", "backgroundColor": "#F8F9FA", "paddingAll": "md", "cornerRadius": "md", "spacing": "sm", "contents": [
                    {"type": "text", "text": "📚 步驟一：翻閱各族辭典及語法書", "size": "xs", "weight": "bold", "color": "#008000"},
                    {"type": "text", "text": "💡 步驟二：比對部落文化性的語料", "size": "xs", "weight": "bold", "color": "#008000"},
                    {"type": "text", "text": "🌿 步驟三：潤飾具備文化詮釋的句子", "size": "xs", "weight": "bold", "color": "#008000"}
                ]},
                {"type": "text", "text": "適用於需要正式、精準、符合部落語境的翻譯場景。", "wrap": True, "size": "sm", "color": "#333333"}
            ]
        },
        "footer": {
            "type": "box", "layout": "vertical", "spacing": "sm",
            "contents": [
                # 🎯 統一中文範例：觸發動態 RAG 與深度文化潤飾
                {"type": "button", "action": {"type": "message", "label": "🧠 點我一鍵測試範例", "text": "🧠 深度翻譯：我喜歡說族語。"}, "style": "primary", "color": "#008000"}
            ]
        }
    }

def create_multimedia_intro_card(tribe="太魯閣"):
    """專屬：多媒體辨識 教學圖卡 (動態族語版)"""
    return {
        "type": "bubble",
        "size": "mega",
        "header": {
            "type": "box", "layout": "vertical", "backgroundColor": "#8A2BE2",
            # 🎯 動態標頭
            "contents": [{"type": "text", "text": f"📸 {tribe}語 多媒體辨識", "weight": "bold", "color": "#FFFFFF", "size": "lg"}]
        },
        "body": {
            "type": "box", "layout": "vertical", "spacing": "md",
            "contents": [
                {"type": "text", "text": "除了手動打字，您還可以透過以下方式讓 AI 幫您翻譯：", "wrap": True, "size": "sm", "color": "#333333"},
                {"type": "box", "layout": "vertical", "backgroundColor": "#F8F9FA", "paddingAll": "md", "cornerRadius": "md", "spacing": "sm", "contents": [
                    {"type": "text", "text": "🎤 傳送語音：自動聽寫並翻譯", "size": "xs", "weight": "bold", "color": "#8A2BE2"},
                    {"type": "text", "text": "🖼️ 傳送照片：自動擷取圖片文字", "size": "xs", "weight": "bold", "color": "#8A2BE2"},
                    {"type": "text", "text": "🎬 傳送影片：自動提取音軌解析", "size": "xs", "weight": "bold", "color": "#8A2BE2"}
                ]},
                {"type": "text", "text": "現在就試著用 LINE 內建的「相機」或「麥克風」功能傳送給我吧！", "wrap": True, "size": "sm", "color": "#333333"}
            ]
        },
        "footer": {
            "type": "box", "layout": "vertical", "spacing": "sm",
            "contents": [
                {
                    "type": "button", 
                    "action": {
                        "type": "uri", 
                        "label": "📸 拍照測試 (自動辨識文字)", 
                        "uri": "https://line.me/R/nv/camera/"
                    }, 
                    "style": "primary", 
                    "color": "#8A2BE2"
                },
                {
                    "type": "button", 
                    "action": {
                        "type": "message", 
                        "label": "🎙️ 語音/影片測試 (引導說明)", 
                        "text": "🎙️ 我要測試語音/影片解析"
                    }, 
                    "style": "secondary",
                    "color": "#8A2BE2"
                }
            ]
        }
    }

def create_share_intro_card():
    """🌟 產出推薦分享的 Flex Message 卡片"""
    return {
      "type": "bubble",
      "size": "mega",
      "hero": {
        "type": "image",
        "url": "https://images.unsplash.com/photo-1529156069898-49953e39b3ac?auto=format&fit=crop&q=80&w=1000", 
        "size": "full",
        "aspectRatio": "20:13",
        "aspectMode": "cover"
      },
      "body": {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "text": "分享傳承的力量 🌿",
            "weight": "bold",
            "size": "xl",
            "color": "#8B4513"
          },
          {
            "type": "text",
            "text": "覺得這套太魯閣語 AI 系統好用嗎？邀請您的好友與族人一起加入，讓語言在數位時代繼續傳承下去。",
            "wrap": True,
            "margin": "md",
            "color": "#666666",
            "size": "sm"
          }
        ]
      },
      "footer": {
        "type": "box",
        "layout": "vertical",
        "spacing": "sm",
        "contents": [
          {
            "type": "button",
            "style": "primary",
            "height": "sm",
            "color": "#8B4513",
            "action": {
              "type": "uri",
              "label": "立即推薦給好友",
              "uri": "https://line.me/R/nv/recommendbot/@514pugaq" 
            }
          }
        ]
      },
      "styles": {
        "footer": {
          "separator": True
        }
      }
    }