app.py

import streamlit as st
import pandas as pd
from PIL import Image
from io import BytesIO
import base64

# 設置頁面配置
st.set_page_config(
    page_title="AI助手介紹",
    page_icon="🤖",
    layout="wide"
)

# CSS 樣式
st.markdown("""
<style>
    .header {
        padding: 1.5rem 0;
        text-align: center;
        background-color: #4a6fa5;
        color: white;
        border-radius: 8px;
        margin-bottom: 2rem;
    }
    .card {
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        padding: 1.5rem;
        height: 100%;
        transition: transform 0.3s;
    }
    .card:hover {
        transform: translateY(-5px);
    }
    .logo-placeholder {
        height: 120px;
        width: 120px;
        background-color: #f1f1f1;
        border-radius: 50%;
        margin: 0 auto 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        font-weight: bold;
        color: #4a6fa5;
    }
    .ai-name {
        text-align: center;
        margin: 15px 0;
        color: #2c3e50;
        font-size: 1.5rem;
    }
    .btn {
        background-color: #4a6fa5;
        color: white !important;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        text-decoration: none;
        margin: 0 auto;
        display: block;
        width: fit-content;
        text-align: center;
    }
    .footer {
        text-align: center;
        margin-top: 3rem;
        padding: 1rem;
        border-top: 1px solid #ddd;
        color: #777;
    }
    h1, h2, h3 {
        color: #4a6fa5;
    }
    h2 {
        border-bottom: 2px solid #4a6fa5;
        padding-bottom: 10px;
    }
</style>
""", unsafe_allow_html=True)

# 頁面標題區
st.markdown('<div class="header"><h1>生成式AI工具介紹</h1><p>由伽碩職業訓練中心和黃朝健講師協力開發</p></div>', unsafe_allow_html=True)

# 介紹文字
st.markdown("""
## 認識主要AI助手

人工智能助手已經成為我們日常生活和工作中不可或缺的一部分。這些AI工具能夠理解並回應人類的問題，提供資訊，幫助完成各種任務。以下是當前最受歡迎的AI助手介紹。
""")

# AI 助手資料
ai_assistants = [
    {
        "name": "ChatGPT 4.0",
        "logo": "GPT-4",
        "developer": "OpenAI",
        "description": "由OpenAI開發的大型語言模型，被廣泛認為是最強大的商業AI助手之一。",
        "features": [
            "多模態能力，能處理文字和圖像",
            "強大的編程和推理能力",
            "知識截止日期相對較新",
            "提供API和插件生態系統"
        ],
        "url": "https://chat.openai.com/",
        "free_tier": "有限功能",
        "paid_tier": "$20/月起",
        "advantage": "全面的能力與廣泛的應用"
    },
    {
        "name": "Claude AI",
        "logo": "Claude",
        "developer": "Anthropic",
        "description": "由Anthropic開發的AI助手，以安全、有益和誠實的互動而著稱。",
        "features": [
            "超長上下文窗口（最多可達100K令牌）",
            "優秀的文件分析和處理能力",
            "更少的幻想內容，更高的準確性",
            "在長篇創意寫作方面表現出色"
        ],
        "url": "https://claude.ai/",
        "free_tier": "基本功能",
        "paid_tier": "$20/月起",
        "advantage": "長上下文和文件處理"
    },
    {
        "name": "Grok",
        "logo": "Grok",
        "developer": "xAI",
        "description": "由xAI（Elon Musk的公司）開發的AI助手，帶有一點反叛精神和幽默感。",
        "features": [
            "實時網絡訪問",
            "獨特的個性和幽默感",
            "對當前事件的實時了解",
            "提供較少的審查和更直接的回答"
        ],
        "url": "https://grok.x.ai/",
        "free_tier": "需訂閱X Premium+",
        "paid_tier": "$16/月起",
        "advantage": "實時網絡訪問和幽默"
    },
    {
        "name": "Gemini",
        "logo": "Gemini",
        "developer": "Google",
        "description": "由Google AI開發的多模態大型語言模型，前身為Bard。",
        "features": [
            "與Google搜索緊密集成",
            "強大的多模態理解能力",
            "實時網絡搜索功能",
            "與Google Workspace集成"
        ],
        "url": "https://gemini.google.com/",
        "free_tier": "基本功能",
        "paid_tier": "$20/月起",
        "advantage": "Google生態系統集成"
    },
    {
        "name": "Perplexity",
        "logo": "Perplexity",
        "developer": "Perplexity AI",
        "description": "一個以回答問題為重點的AI搜索引擎，提供引用來源的答案。",
        "features": [
            "實時網絡搜索和引用",
            "提供來源連結的答案",
            "可以追問以獲取更深入的信息",
            "專注於事實性查詢和研究"
        ],
        "url": "https://www.perplexity.ai/",
        "free_tier": "基本功能",
        "paid_tier": "$20/月起",
        "advantage": "引用來源的答案"
    },
    {
        "name": "NotebookLM",
        "logo": "NoteBook",
        "developer": "Google",
        "description": "由Google開發的專注於資料分析和筆記整理的AI工具。",
        "features": [
            "基於用戶上傳的文件生成答案",
            "能夠處理多個文件並找出關聯",
            "提供引用和頁碼的回答",
            "適合研究和學習場景"
        ],
        "url": "https://notebooklm.google.com/",
        "free_tier": "完全免費",
        "paid_tier": "暫無付費版",
        "advantage": "基於用戶文件的精確答案"
    }
]

# 顯示 AI 助手卡片
cols = st.columns(3)  # 每行顯示3個卡片

for i, assistant in enumerate(ai_assistants):
    with cols[i % 3]:
        st.markdown(f"""
        <div class="card">
            <div class="logo-placeholder">{assistant['logo']}</div>
            <h3 class="ai-name">{assistant['name']}</h3>
            <p>{assistant['description']}</p>
            <div>
                <strong>主要特點：</strong>
                <ul>
                    {"".join([f"<li>{feature}</li>" for feature in assistant['features']])}
                </ul>
            </div>
            <a href="{assistant['url']}" class="btn" target="_blank">訪問網站</a>
        </div>
        <br>
        """, unsafe_allow_html=True)

# 比較表格
st.markdown("## AI助手比較")

# 創建比較表格數據
comparison_data = {
    'AI助手': [assistant['name'] for assistant in ai_assistants],
    '開發商': [assistant['developer'] for assistant in ai_assistants],
    '免費版': [assistant['free_tier'] for assistant in ai_assistants],
    '付費版': [assistant['paid_tier'] for assistant in ai_assistants],
    '主要優勢': [assistant['advantage'] for assistant in ai_assistants],
}

# 顯示比較表格
st.dataframe(pd.DataFrame(comparison_data), use_container_width=True)

# 添加互動功能 - 選擇比較
st.markdown("## 互動比較")
selected_assistants = st.multiselect(
    "選擇要比較的AI助手",
    [assistant['name'] for assistant in ai_assistants],
    default=[assistant['name'] for assistant in ai_assistants[:2]]  # 默認選擇前2個
)

# 如果有選擇的助手，顯示它們的比較
if selected_assistants:
    selected_data = {
        'AI助手': [],
        '開發商': [],
        '免費版': [],
        '付費版': [],
        '主要優勢': [],
    }
    
    for assistant in ai_assistants:
        if assistant['name'] in selected_assistants:
            selected_data['AI助手'].append(assistant['name'])
            selected_data['開發商'].append(assistant['developer'])
            selected_data['免費版'].append(assistant['free_tier'])
            selected_data['付費版'].append(assistant['paid_tier'])
            selected_data['主要優勢'].append(assistant['advantage'])
    
    st.dataframe(pd.DataFrame(selected_data), use_container_width=True)

# AI 助手推薦
st.markdown("## AI助手推薦")
st.write("根據您的需求，我們可以推薦最適合的AI助手。")

use_case = st.selectbox(
    "您主要用AI助手做什麼？",
    [
        "一般問答和聊天",
        "編程和技術支持",
        "創意寫作和內容生成",
        "研究和資料整理",
        "教育和學習",
        "商業和專業分析"
    ]
)

if use_case:
    recommended = None
    reason = ""
    
    if use_case == "一般問答和聊天":
        recommended = "ChatGPT 4.0"
        reason = "提供全面且平衡的回答，適合日常使用。"
    elif use_case == "編程和技術支持":
        recommended = "ChatGPT 4.0"
        reason = "在程式碼生成和技術問題解答方面表現優異。"
    elif use_case == "創意寫作和內容生成":
        recommended = "Claude AI"
        reason = "長文本處理能力強，創意寫作品質高。"
    elif use_case == "研究和資料整理":
        recommended = "Perplexity"
        reason = "提供引用來源的詳細答案，適合研究使用。"
    elif use_case == "教育和學習":
        recommended = "NotebookLM"
        reason = "可以基於您的學習資料提供個性化解答。"
    elif use_case == "商業和專業分析":
        recommended = "Claude AI"
        reason = "可處理大量文件，分析能力強，適合商業場景。"
    
    st.info(f"推薦使用: **{recommended}**\n\n原因: {reason}")

# 頁腳
st.markdown('<div class="footer"><p>© 2025 AI助手介紹網站 | 黃朝健製作</p><p>價格和功能可能隨時變更，請訪問各官方網站獲取最新信息</p></div>', unsafe_allow_html=True)