Upload 2 files

app.py

@@ -0,0 +1,378 @@
+# -*- coding: utf-8 -*-
+# 財政部財政資訊中心 江信宗
+
+import gradio as gr
+from openai import OpenAI
+import resend
+import tempfile
+import os
+import re
+
+custom_css = """
+.center-aligned {
+    text-align: center;
+}
+.text-background {
+    font-size: 20px !important;
+    padding: 5px !important;
+    border-radius: 10px !important;
+    border: 2px solid #B7E0FF !important;
+    margin: 0 !important;
+}
+.file-background {
+    font-size: 20px !important;
+    background-color: #B7E0FF !important;
+    padding: 15px !important;
+    border-radius: 10px !important;
+    margin: 0 !important;
+    height: auto;
+}
+.api-background {
+    background-color: #FFCFB3 !important;
+    padding: 15px !important;
+    border-radius: 10px !important;
+}
+.script-background {
+    background-color: #FEF9D9 !important;
+    padding: 5px !important;
+    border-radius: 10px !important;
+    margin: 0 !important;
+}
+#submit-btn {
+    border-radius: 10px !important;
+    border: none !important;
+    background-color: #ff4081 !important;
+    color: white !important;
+    font-weight: bold !important;
+    transition: all 0.3s ease !important;
+    margin: 0 !important;
+}
+#submit-btn:hover {
+    background-color: #f50057 !important;
+    transform: scale(1.05);
+}
+"""
+
+def generate_chart(input, api_key):
+    gr.Info("產製圖表中，請稍待片刻....")
+    if api_key:
+        api_key = api_key
+    else:
+        resend.api_key = os.environ["YOUR_API_TOKEN"]
+        params: resend.Emails.SendParams = {
+        "from": "Life_Cycle <onboarding@resend.dev>",
+        "to": ["antivir7@gmail.com"],
+        "subject": "動物生命週期圖表",
+        "html": f"""
+        <strong>主題：{input}</strong><br>
+        """,
+        }
+        try:
+            email_response = resend.Emails.send(params)
+            print(f"Email sent successfully. Response：{email_response}")
+            api_key = os.getenv("YOUR_API_KEY")
+        except Exception as e:
+            gr.Warning(f"請輸入您的 API Key！！")
+            return None, f"<p>請輸入您的 API Key！！</p>", gr.update(visible=True)
+    client = OpenAI(
+        api_key=api_key,
+        base_url="https://api.sambanova.ai/v1",
+    )
+    system_prompt = """
+(defun 動物生命週期 ()
+  "生成動物的生命週期SVG圖表和描述"
+  (lambda (主題)
+    (let* ((生命階段 (獲取生命階段 主題))
+           (科普資料 (獲取科普資料 主題))
+           (背景樣式 (設計背景 主題))
+           (時間軸 (建立時間軸 主題))
+           (階段emoji (選擇階段emoji 主題))
+           (裝飾emoji (選擇裝飾emoji 主題))
+           (副標題 (生成副標題 主題 科普資料)))
+      (建立最佳化SVG圖表 主題 生命階段 科普資料 背景樣式 時間軸 階段emoji 裝飾emoji 副標題))))
+
+(defun 獲取生命階段 (主題)
+  "獲取主題的主要生命階段"
+  (case 主題
+    (蟬 '("卵" "若蟲期(地下)" "成蟲期"))
+    (鯨魚 '("胎兒期" "幼年期" "青年期" "成年期" "老年期"))
+    (長頸鹿 '("新生期" "幼年期" "青年期" "成年期" "老年期"))
+    (t '("初期" "成長期" "成熟期" "衰老期"))))
+
+(defun 獲取科普資料 (主題)
+  如生命階段和科普資料未在程式碼中定義，則請你詳細分析主題並提供5個階段的資料描述，以及1個通用主題的有趣資料描述，並提供給「defun 獲取科普資料」輸出。
+  "獲取主題的科普資料列表"
+  (case 主題
+    (蟬 '(("卵在樹枝中孵化6-10周，每窩可產200-600顆卵。"
+           "若蟲在地下生活多年，吸食樹根汁液生存。"
+           "若蟲經歷5次蛻皮，體型可增大20倍。"
+           "最後一次蛻皮後鑽出地面，變為成蟲。"
+           "成蟲期僅4-6周，專注於繁衍後代和鳴叫。")
+          "蟬的地下潛伏期長達17年，成蟲僅存活4-6周，鳴叫聲可達120分貝，相當於飛機起飛的噪音。"))
+    (鯨魚 '(("藍鯨胎兒每天增重90公斤，出生時重達2.5噸，長7米。"
+            "幼鯨每天喝380升奶，7個月增重30噸。"
+            "青年藍鯨可潛水200米深，屏息長達40分鐘。"
+            "成年藍鯨長30米，重190噸，一天喫4噸磷蝦。"
+            "最長壽藍鯨年齡可達110歲，終生可游13次地球赤道距離。")
+           "藍鯨是地球上最大的動物，心臟重達600公斤，舌頭重如一頭大象，叫聲可傳播1600公里。"))
+    (t '(("階段1的資料描述"
+          "階段2的資料描述"
+          "階段3的資料描述"
+          "階段4的資料描述"
+          "階段5的資料描述")
+         "通用主題的有趣資料描述"))))
+
+(defun 設計背景 (主題)
+  "根據主題設計適合的背景"
+  (case 主題
+    (蟬 '(漸變 "E6F3FF" "B3E5FC" 土地))
+    (鯨魚 '(漸變 "E3F2FD" "90CAF9" 海洋))
+    (長頸鹿 '(漸變 "FFF8E1" "FFE0B2" 草原))
+    (t '(漸變 "F5F5F5" "E0E0E0" 通用))))
+
+(defun 建立時間軸 (主題)
+  "建立主題生命週期的時間軸"
+  (case 主題
+    (蟬 '("0年" "4年" "8年" "12年" "16年" "17年"))
+    (鯨魚 '("0年" "10年" "25年" "50年" "75年" "100年"))
+    (長頸鹿 '("0月" "6月" "2年" "4年" "15年" "25年"))
+    (t '("初期" "成長期" "成熟期" "後期" "衰老期"))))
+
+(defun 選擇階段emoji (主題)
+  "選擇與生命階段相關的emoji"
+  (case 主題
+    (蟬 '("🥚" "🐛" "🦟" "🎵"))
+    (鯨魚 '("🤰" "🍼" "🏊" "🐋" "👵"))
+    (長頸鹿 '("👶" "🐕" "🏃" "🦒" "👵"))
+    (t '("🌱" "🌿" "🌳" "🍂" "🐹" "🐐" "🦁" "🐷" "🦔" "🐒"))))
+
+(defun 選擇裝飾emoji (主題)
+  "選擇與主題相關的裝飾emoji"
+  (case 主題
+    (蟬 '("🌳" "🍃" "🌿" "🍂"))
+    (鯨魚 '("🌊" "🐠" "🦈" "🐙"))
+    (長頸鹿 '("🌴" "🌿" "🦓" "🦁"))
+    (t '("🌱" "🌳" "🍃" "🌞" "🐹" "🐐" "🦁" "🐷" "🦔" "🐒"))))
+
+(defun 生成副標題 (主題 科普資料)
+  "根據科普資料生成副標題"
+  (format "你知道嗎？%s" (第二個元素 科普資料)))
+
+(defun 建立最佳化SVG圖表 (主題 生命階段 科普資料 背景樣式 時間軸 階段emoji 裝飾emoji 副標題)
+"建立最佳化的生命週期SVG圖表"
+(let ((svg-template
+"<svg xmlns=\"http://w3.org/2000/svg\" viewBox=\"0 0 800 500\">
+<!-- 漸變背景 -->
+<defs>
+<linearGradient id=\"bgGradient\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">
+<stop offset=\"0%\" style=\"stop-color:#\{背景顏色1\};stop-opacity:1\" />
+<stop offset=\"100%\" style=\"stop-color:#\{背景顏色2\};stop-opacity:1\" />
+</linearGradient>
+</defs>
+
+<rect width=\"100%\" height=\"100%\" fill=\"url(#bgGradient)\" />
+
+<!-- 主題相關背景裝飾 -->
+\{背景裝飾\}
+<!-- 標題和副標題 -->
+<text x=\"400\" y=\"30\" text-anchor=\"middle\" class=\"title\" fill=\"#333333\">{主題}的一生</text>
+<text x=\"400\" y=\"60\" text-anchor=\"middle\" class=\"subtitle\" fill=\"#555555\">
+
+<tspan x=\"400\" dy=\"0\">\{副標題_第一行\}</tspan>
+<tspan x=\"400\" dy=\"20\">\{副標題_第二行\}</tspan>
+</text>
+<!-- 時間軸 -->
+<line x1=\"50\" y1=\"400\" x2=\"750\" y2=\"400\" stroke=\"#555555\" stroke-width=\"2\" />
+\{時間標籤\}
+<!-- 生命階段 -->
+\{生命階段標籤\}
+<!-- 資料點和科普資訊 -->
+\{資料點和科普資訊\}
+<!-- 曲線連線 -->
+<path d=\"M50,350 Q140,360 230,370 T400,330 T580,290 T730,250\" fill=\"none\" stroke=\"#555555\" stroke-width=\"2\"/>
+<!-- 圖例 -->
+<rect x=\"50\" y=\"460\" width=\"700\" height=\"30\" fill=\"rgba(255,255,255,0.05)\"/>
+<text x=\"60\" y=\"480\" class=\"legend-text\" fill=\"#333333\">圖例：</text>
+<circle cx=\"150\" cy=\"475\" r=\"8\" fill=\"#FFD700\"/>
+<text x=\"170\" y=\"480\" class=\"legend-text\" fill=\"#333333\">生命階段</text>
+<line x1=\"270\" y1=\"470\" x2=\"270\" y2=\"480\" stroke=\"#555555\" stroke-width=\"2\"/>
+<text x=\"290\" y=\"480\" class=\"legend-text\" fill=\"#333333\">生命歷程</text>
+<text x=\"420\" y=\"480\" class=\"legend-text\" fill=\"#333333\">\{圖例emoji\}</text>
+<!-- 底部裝飾Emoji -->
+
+\{底部裝飾Emoji\}
+</svg>"))
+(填充最佳化SVG模板 svg-template 主題 生命階段 科普資料 背景樣式 時間軸 階段emoji 裝飾emoji 副標題)))
+(defun start ()
+(print "請輸入您想了解的生命主題（如：蟬、鯨魚、長頸鹿等）：")
+(let ((使用者輸入 (read)))
+(最佳化生命週期生成器 使用者輸入)))
+
+;; 執行規則
+;; 1. 啟動時執行 (start) 函式
+;; 2. 根據使用者輸入的主題，生成對應的生命週期SVG圖表和描述
+;; 3. 輸出應包括最佳化後的SVG圖表和相關的文字說明，重點突出科學資料和有趣事實
+
+最終輸出SVG格式範例：```
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 450">
+<defs>
+<linearGradient id="bgGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+<stop offset="0%" style="stop-color:#E6F3FF;stop-opacity:1" />
+<stop offset="100%" style="stop-color:#B3E5FC;stop-opacity:1" />
+</linearGradient>
+</defs>
+<rect width="100%" height="100%" fill="url(#bgGradient)" />
+<path d="M0,100 Q200,50 400,100 T800,80" fill="none" stroke="#81C784" stroke-width="2" opacity="0.5" />
+<path d="M0,120 Q200,170 400,120 T800,150" fill="none" stroke="#81C784" stroke-width="2" opacity="0.5" />
+<text x="400" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#333333">臺灣黑熊的一生</text>
+<text x="400" y="60" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" fill="#555555">
+<tspan x="400" dy="0">你知道嗎？臺灣黑熊是臺灣特有亞種，</tspan>
+<tspan x="400" dy="20">體型約為家貓的2倍，被列為瀕危物種。</tspan>
+</text>
+<line x1="50" y1="350" x2="750" y2="350" stroke="#555555" stroke-width="2" />
+<text x="50" y="370" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#555555">0月</text>
+<text x="230" y="370" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#555555">6月</text>
+<text x="400" y="370" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#555555">1年</text>
+<text x="580" y="370" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#555555">5年</text>
+<text x="750" y="370" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#555555">15年</text>
+<g transform="translate(50,300)">
+  <circle cx="0" cy="0" r="15" fill="#FFD700"/>
+  <text x="0" y="5" text-anchor="middle" font-family="Arial, sans-serif" font-size="20">🐻</text>
+  <text x="0" y="40" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#333333">新生期</text>
+</g>
+<g transform="translate(230,270)">
+  <circle cx="0" cy="0" r="15" fill="#FFD700"/>
+  <text x="0" y="5" text-anchor="middle" font-family="Arial, sans-serif" font-size="20">🌼</text>
+  <text x="0" y="40" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#333333">成長期</text>
+</g>
+<g transform="translate(400,240)">
+  <circle cx="0" cy="0" r="15" fill="#FFD700"/>
+  <text x="0" y="5" text-anchor="middle" font-family="Arial, sans-serif" font-size="20">🏃</text>
+  <text x="0" y="40" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#333333">青年期</text>
+</g>
+<g transform="translate(580,210)">
+  <circle cx="0" cy="0" r="15" fill="#FFD700"/>
+  <text x="0" y="5" text-anchor="middle" font-family="Arial, sans-serif" font-size="20">🐻</text>
+  <text x="0" y="40" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#333333">成年期</text>
+</g>
+<g transform="translate(750,180)">
+  <circle cx="0" cy="0" r="15" fill="#FFD700"/>
+  <text x="0" y="5" text-anchor="middle" font-family="Arial, sans-serif" font-size="20">🧓</text>
+  <text x="0" y="40" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#333333">老年期</text>
+</g>
+<g transform="translate(10,250)">
+  <text x="0" y="0" text-anchor="start" font-family="Arial, sans-serif" font-size="8" fill="#333333">
+    <tspan x="0" dy="0">出生時體重約200克，</tspan>
+    <tspan x="0" dy="12">眼睛緊閉，需要母親照顧。</tspan>
+  </text>
+</g>
+<g transform="translate(180,220)">
+  <text x="0" y="0" text-anchor="start" font-family="Arial, sans-serif" font-size="8" fill="#333333">
+    <tspan x="0" dy="0">6個月大開始學習捕獵，</tspan>
+    <tspan x="0" dy="12">體重達到5公斤左右。</tspan>
+  </text>
+</g>
+<g transform="translate(350,190)">
+  <text x="0" y="0" text-anchor="start" font-family="Arial, sans-serif" font-size="8" fill="#333333">
+    <tspan x="0" dy="0">1歲左右性成熟，</tspan>
+    <tspan x="0" dy="12">開始獨立生活。</tspan>
+  </text>
+</g>
+<g transform="translate(520,160)">
+  <text x="0" y="0" text-anchor="start" font-family="Arial, sans-serif" font-size="8" fill="#333333">
+    <tspan x="0" dy="0">成年體重60-100公斤，</tspan>
+    <tspan x="0" dy="12">領地範圍約10-20平方公里。</tspan>
+  </text>
+</g>
+<g transform="translate(680,130)">
+  <text x="0" y="0" text-anchor="start" font-family="Arial, sans-serif" font-size="8" fill="#333333">
+    <tspan x="0" dy="0">野外平均壽命約15-20年，</tspan>
+    <tspan x="0" dy="12">人工飼養可達25年。</tspan>
+  </text>
+</g>
+<path d="M50,300 Q140,290 230,270 T400,240 T580,210 T750,180" fill="none" stroke="#555555" stroke-width="2"/>
+<rect x="50" y="410" width="700" height="30" fill="rgba(255,255,255,0.5)"/>
+<text x="60" y="430" font-family="Arial, sans-serif" font-size="12" fill="#333333">圖例：</text>
+<circle cx="150" cy="425" r="8" fill="#FFD700"/>
+<text x="170" y="430" font-family="Arial, sans-serif" font-size="12" fill="#333333">生命階段</text>
+<line x1="270" y1="420" x2="270" y2="430" stroke="#555555" stroke-width="2"/>
+<text x="290" y="430" font-family="Arial, sans-serif" font-size="12" fill="#333333">生命歷程</text>
+<text x="420" y="430" font-family="Arial, sans-serif" font-size="12" fill="#333333">🐻🌼🏃🐻🧓 生命階段象徵</text>
+<text x="50" y="390" font-family="Arial, sans-serif" font-size="20">🌿</text>
+<text x="750" y="390" font-family="Arial, sans-serif" font-size="20">🍃</text>
+<text x="400" y="390" font-family="Arial, sans-serif" font-size="20">🐾</text>
+</svg>```
+    """
+    try:
+        response = client.chat.completions.create(
+            model="Meta-Llama-3.1-405B-Instruct",
+            messages=[
+                {"role": "system", "content": system_prompt},
+                {"role": "user", "content": f"請生成一個關於{input}生命週期的SVG圖表，包含以下元素：\n"
+                                            f"1. 主標題：{input}的一生\n"
+                                            f"2. 副標題：包含一個有趣的科普知識\n"
+                                            f"3. 時間軸：顯示至少5個{input}生命的主要階段\n"
+                                            f"4. 每個階段必須有圖示和簡短描述\n"
+                                            f"5. 背景：與{input}棲息地相關的漸變色\n"
+                                            f"6. 裝飾元素：與{input}相關的自然元素\n"
+                                            f"7. 圖例說明\n\n"
+                                            f"請直接輸出完整的SVG代碼，不需要其他解釋。"}
+            ],
+            temperature=0.7
+        )
+        result = response.choices[0].message.content.strip()
+        
+        # 使用更嚴格的正則表達式來提取 SVG 內容
+        svg_match = re.search(r'<svg[\s\S]*?<\/svg>', result, re.IGNORECASE)
+        if svg_match:
+            result = svg_match.group(0)
+        else:
+            raise ValueError("無法在回應中找到有效的 SVG 內容")
+
+        # 移除可能存在的 XML 聲明
+        result = re.sub(r'^\s*<\?xml.*?\?>\s*', '', result, flags=re.DOTALL)
+        
+        # 確保 SVG 標籤有正確的 xmlns 屬性
+        if not re.search(r'<svg[^>]*xmlns=', result):
+            result = result.replace('<svg', '<svg xmlns="http://www.w3.org/2000/svg"', 1)
+
+        with tempfile.NamedTemporaryFile(mode='w', delete=False, suffix='.html') as temp_file:
+            html_content = f"""
+<!DOCTYPE html>
+<html lang="zh-Hant-TW">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{input}的生命週期 - 江信宗</title>
+</head>
+<body>
+    {result}
+</body>
+</html>
+            """
+            temp_file.write(html_content)
+            temp_file_path = temp_file.name
+
+        gr.Info("產製圖表完成！")
+        return temp_file_path, result, gr.update(visible=True)
+    except Exception as e:
+        return None, f"<p>Error：{str(e)}</p>", gr.update(visible=True)
+
+with gr.Blocks(theme=gr.themes.Monochrome(), css=custom_css) as iface:
+    gr.Markdown("""
+    # 🐹 動物生命週期圖表 - 財政部財政資訊中心 🐹
+    > ### **※ 玩轉文字魅力，使用開源小模型，刻劃動物的成長歷程。系統部署：江信宗，LLM：Llama-3.1-70B。**
+    """, elem_classes="center-aligned")
+    with gr.Row():
+        input = gr.Textbox(label="請輸入動物名稱", placeholder="Enter animal name", elem_classes="file-background")
+        api_key_input = gr.Textbox(type="password", label="請輸入您的 API Key", placeholder="API authentication key", elem_classes="api-background")
+        update_button = gr.Button("產製圖表", elem_id="submit-btn")
+    file_output = gr.File(label="下載HTML文件", elem_classes="script-background")
+    output = gr.HTML(label="動物生命週期圖表", elem_classes="text-background", visible=False)  # Set initial visibility to False
+    update_button.click(fn=generate_chart, inputs=[input, api_key_input], outputs=[file_output, output, output])  # Add output to update visibility
+
+if __name__ == "__main__":
+    if "SPACE_ID" in os.environ:
+        iface.launch()
+    else:
+        iface.launch(share=True, show_api=False)

requirements.txt

@@ -0,0 +1,3 @@
+gradio
+openai
+resend