Create app.py

app.py

@@ -0,0 +1,301 @@
+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;
+        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>探索當前領先的AI語言模型和智能助手</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)