生命圖譜生成器 – 您的專屬藝術影像 https://cdn.tailwindcss.com https://unpkg.com/react@18/umd/react.production.min.js https://unpkg.com/react-dom@18/umd/react-dom.production.min.js https://unpkg.com/@babel/standalone/babel.min.js https://unpkg.com/lucide@latest @import url(‘https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700;900&display=swap’); body { font-family: ‘Noto Sans TC’, sans-serif; } .animate-spin-slow { animation: spin 3s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } const { useState, useEffect } = React; // Lucide 圖示組件封裝 const Icon = ({ name, size = 24, className = “" }) => { const [iconNode, setIconNode] = useState(null); useEffect(() => { if (window.lucide) { const icon = window.lucide.icons[name]; if (icon) setIconNode(icon); } }, [name]); if (!iconNode) return ; return ; }; const apiKey = “"; // 執行環境會自動提供 API Key const App = () => { const [step, setStep] = useState(0); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [imageResult, setImageResult] = useState(null); const [loadingPhase, setLoadingPhase] = useState(“"); const [promptData, setPromptData] = useState({ q1_1: “, q1_2: “, q2_1: “, q2_2: “, q3_1: “, q3_2: " }); useEffect(() => { if (window.lucide) window.lucide.createIcons(); }, [step, loadingPhase]); const fetchWithRetry = async (url, options, maxRetries = 5) => { let delay = 1000; for (let i = 0; i setTimeout(resolve, delay)); delay *= 2; } throw new Error(“連線超時。"); }; const generateImage = async () => { setLoading(true); setError(null); setStep(4); setLoadingPhase(“正在解析您的心靈關鍵字…"); try { // 1. 生成提示詞 const systemPrompt = “You are a visionary art director. Translate Chinese philosophical thoughts into professional English image prompts. Style: Ethereal, Surreal, Cinematic."; const userQuery = `Identity: ${promptData.q1_1}, Foundation: ${promptData.q1_2}, Environment: ${promptData.q2_1}, Pace: ${promptData.q2_2}, Value: ${promptData.q3_1}, Legacy: ${promptData.q3_2}`; const textData = await fetchWithRetry( `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, { method: ‘POST’, headers: { ‘Content-Type’: ‘application/json’ }, body: JSON.stringify({ contents: [{ parts: [{ text: userQuery }] }], systemInstruction: { parts: [{ text: systemPrompt }] } }) } ); const finalPrompt = textData.candidates?.[0]?.content?.parts?.[0]?.text || “A symbolic ethereal landscape"; setLoadingPhase(“AI 畫布正在著色中…"); // 2. 生成圖片 const imageData = await fetchWithRetry( `https://generativelanguage.googleapis.com/v1beta/models/imagen-4.0-generate-001:predict?key=${apiKey}`, { method: ‘POST’, headers: { ‘Content-Type’: ‘application/json’ }, body: JSON.stringify({ instances: [{ prompt: finalPrompt }], parameters: { sampleCount: 1 } }) } ); if (imageData.predictions?.[0]?.bytesBase64Encoded) { setImageResult(`data:image/png;base64,${imageData.predictions[0].bytesBase64Encoded}`); setStep(5); } else { throw new Error(“影像生成失敗。"); } } catch (err) { setError(err.message); setStep(3); } finally { setLoading(false); } }; const InputGroup = ({ label, placeholder, value, onChange }) => ( ); return ( ); }; const root = ReactDOM.createRoot(document.getElementById(‘root’)); root.render();