function MainComponent() { const [question, setQuestion] = React.useState(''); const [reading, setReading] = React.useState(null); const [cardImages, setCardImages] = React.useState([]); const [loading, setLoading] = React.useState(false); const [spread, setSpread] = React.useState('oneOracle'); const [pastReadings, setPastReadings] = React.useState([]); const [feedback, setFeedback] = React.useState(''); const [backgroundImage, setBackgroundImage] = React.useState(''); React.useEffect(()=>{ fetchBackgroundImage(); }, []); const fetchBackgroundImage = async ()=>{ try { const response = await fetch('/integrations/image-search/imagesearch?q=半透明の宇宙+神秘的な星+幻想的'); const data = await response.json(); if (data.items && data.items.length > 0) { setBackgroundImage(data.items[0].originalImageUrl); } } catch (error) { console.error('Error fetching background image:', error); } }; const translateText = async (text, target = 'ja')=>{ try { const response = await fetch('/integrations/google-translate/language/translate/v2', { method: 'POST', body: new URLSearchParams({ q: text, target: target }) }); const data = await response.json(); return data.data.translations[0].translatedText; } catch (error) { console.error('Translation error:', error); return text; } }; const generateReading = async ()=>{ setLoading(true); try { const response = await fetch('/integrations/anthropic-claude-sonnet-3-5/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'system', content: '日本語でタロットリーディングを行う占い師として振る舞ってください。質問に対して、温かく励ますような口調で回答してください。カードの意味と質問との関連性を解釈し、詳細な説明とアドバイスを提供してください。' }, { role: 'user', content: `次の質問に対するタロットリーディングを行ってください。スプレッド: ${spread}, 質問: ${question}` } ] }) }); const data = await response.json(); const newReading = data.choices[0].message.content; setReading(newReading); setPastReadings((prev)=>[ ...prev, { question, reading: newReading, date: new Date().toLocaleString() } ]); const cardCount = spread === 'oneOracle' ? 1 : spread === 'threeCard' ? 3 : 10; const imagePromises = Array(cardCount).fill().map(()=>fetch(`/integrations/dall-e-3/?prompt=日本的なタロットカード、神秘的、${question}`).then((res)=>res.json())); const imageResponses = await Promise.all(imagePromises); setCardImages(imageResponses.map((res)=>res.data[0])); } catch (error) { console.error('Error generating reading:', error); } setLoading(false); }; const handleFeedbackSubmit = async ()=>{ try { await fetch('/integrations/anthropic-claude-sonnet-3-5/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'system', content: 'タロットリーディングのフィードバックを分析し、改善点を見つけてください。' }, { role: 'user', content: `リーディング: ${reading}\nフィードバック: ${feedback}` } ] }) }); setFeedback(''); } catch (error) { console.error('Error submitting feedback:', error); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-opacity-50 bg-blue-900 flex flex-col items-center justify-center p-4 relative overflow-hidden", style: { backgroundImage: `url(${backgroundImage})`, backgroundSize: 'cover', backgroundPosition: 'center' }, __source: { fileName: "", lineNumber: 109, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 pointer-events-none", __source: { fileName: "", lineNumber: 110, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "star absolute w-2 h-2 bg-white rounded-full opacity-50 animate-twinkle", __source: { fileName: "", lineNumber: 111, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "star absolute w-3 h-3 bg-yellow-200 rounded-full opacity-50 animate-twinkle-delay", __source: { fileName: "", lineNumber: 112, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "aurora absolute inset-0 bg-gradient-to-r from-blue-400 to-purple-500 opacity-20 animate-aurora", __source: { fileName: "", lineNumber: 113, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-white mb-8 font-crimson-text", __source: { fileName: "", lineNumber: 115, columnNumber: 7 }, __self: this }, "🌌 運命のCreate 🌌"), /*#__PURE__*/ React.createElement("div", { className: "bg-white bg-opacity-80 rounded-lg p-6 max-w-md w-full", __source: { fileName: "", lineNumber: 116, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("select", { className: "w-full p-2 mb-4 border border-gray-300 rounded font-noto-sans", value: spread, onChange: (e)=>setSpread(e.target.value), __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "oneOracle", __source: { fileName: "", lineNumber: 122, columnNumber: 11 }, __self: this }, "ワンオラクル"), /*#__PURE__*/ React.createElement("option", { value: "threeCard", __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, "スリーカードスプレッド"), /*#__PURE__*/ React.createElement("option", { value: "celticCross", __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }, "ケルト十字スプレッド")), /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-2 mb-4 border border-gray-300 rounded font-noto-sans", rows: "3", placeholder: "ここに質問を入力してください...", value: question, onChange: (e)=>setQuestion(e.target.value), __source: { fileName: "", lineNumber: 126, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-purple-600 text-white py-2 rounded hover:bg-purple-700 transition duration-300 font-noto-sans", onClick: generateReading, disabled: loading, __source: { fileName: "", lineNumber: 133, columnNumber: 9 }, __self: this }, loading ? '読み解き中...' : 'タロットを引く'), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex flex-wrap justify-center", __source: { fileName: "", lineNumber: 140, columnNumber: 9 }, __self: this }, cardImages.map((image, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: image, alt: `日本的な神秘的タロットカード ${index + 1}`, className: "w-[200px] h-[300px] object-cover rounded m-1", __source: { fileName: "", lineNumber: 142, columnNumber: 13 }, __self: this }))), reading && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 146, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-2 font-crimson-text", __source: { fileName: "", lineNumber: 147, columnNumber: 13 }, __self: this }, "リーディング結果:"), /*#__PURE__*/ React.createElement("p", { className: "text-black font-bold text-base font-noto-sans", __source: { fileName: "", lineNumber: 148, columnNumber: 13 }, __self: this }, reading)), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 151, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-2 mb-2 border border-gray-300 rounded font-noto-sans", rows: "2", placeholder: "フィードバックを入力してください...", value: feedback, onChange: (e)=>setFeedback(e.target.value), __source: { fileName: "", lineNumber: 152, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-green-600 text-white py-2 rounded hover:bg-green-700 transition duration-300 font-noto-sans", onClick: handleFeedbackSubmit, __source: { fileName: "", lineNumber: 159, columnNumber: 11 }, __self: this }, "フィードバックを送信"))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 bg-white bg-opacity-80 rounded-lg p-6 max-w-md w-full", __source: { fileName: "", lineNumber: 167, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4 font-crimson-text", __source: { fileName: "", lineNumber: 168, columnNumber: 9 }, __self: this }, "過去のリーディング"), pastReadings.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4 border-b pb-2", __source: { fileName: "", lineNumber: 170, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold font-noto-sans", __source: { fileName: "", lineNumber: 171, columnNumber: 13 }, __self: this }, item.date), /*#__PURE__*/ React.createElement("p", { className: "font-noto-sans", __source: { fileName: "", lineNumber: 172, columnNumber: 13 }, __self: this }, item.question), /*#__PURE__*/ React.createElement("p", { className: "font-noto-sans text-sm text-gray-600", __source: { fileName: "", lineNumber: 173, columnNumber: 13 }, __self: this }, item.reading))))); } /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 181, columnNumber: 1 }, __self: this }, ` @keyframes twinkle { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } @keyframes twinkle-delay { 0%, 100% { opacity: 0.7; } 50% { opacity: 0.3; } } @keyframes aurora { 0% { opacity: 0.1; } 50% { opacity: 0.3; } 100% { opacity: 0.1; } } .animate-twinkle { animation: twinkle 3s ease-in-out infinite; } .animate-twinkle-delay { animation: twinkle-delay 4s ease-in-out infinite; } .animate-aurora { animation: aurora 15s ease-in-out infinite; } .star { top: 10%; left: 10%; } .star:nth-child(2) { top: 30%; left: 70%; } `);