function MainComponent() { const [activeGenre, setActiveGenre] = React.useState('料理'); const [selectedProblem, setSelectedProblem] = React.useState(''); const [solution, setSolution] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const [audioUrl, setAudioUrl] = React.useState(''); const genres = [ '料理', '筋トレ', '健康', '恋愛', '仕事', '未来' ]; const colors = { primary: '#FF9F1C', secondary: '#2EC4B6', tertiary: '#E71D36' }; const commonProblems = { '料理': [ '時間がない', '献立が思いつかない', '栄養バランスが悪い' ], '筋トレ': [ 'モチベーションが続かない', '正しいフォームがわからない', '効果が出ない' ], '健康': [ '睡眠不足', 'ストレス解消法', '生活習慣病が心配' ], '恋愛': [ '出会いがない', '告白できない', '長続きしない' ], '仕事': [ 'キャリアアップ', 'ワークライフバランス', 'ストレス管理' ], '未来': [ '将来の不安', '目標設定', '自己実現' ] }; const handleProblemClick = async (problem)=>{ setSelectedProblem(problem); setIsLoading(true); setSolution(''); setAudioUrl(''); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: `${activeGenre}に関する「${problem}」という悩みの解決方法を簡潔に教えてください。` } ] }) }); const data = await response.json(); const solutionText = data.choices[0].message.content; setSolution(solutionText); const audioResponse = await fetch(`/integrations/text-to-speech/speech?text=${encodeURIComponent(solutionText)}`); const audioBlob = await audioResponse.blob(); const audioUrl = URL.createObjectURL(audioBlob); setAudioUrl(audioUrl); } catch (error) { console.error('Error:', error); } finally{ setIsLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "w-full min-h-screen bg-gradient-to-r from-[#FF9F1C] via-[#2EC4B6] to-[#E71D36] text-white font-roboto p-4 md:p-8", __source: { fileName: "", lineNumber: 59, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-5xl font-bold text-center mb-12", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, "Keita-Lab"), /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-4 mb-8", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, genres.map((genre)=>/*#__PURE__*/ React.createElement("button", { key: genre, className: `px-6 py-3 rounded-full text-lg transition-colors duration-300 ${activeGenre === genre ? 'bg-white text-[#FF9F1C]' : 'bg-opacity-20 bg-white hover:bg-opacity-30'}`, onClick: ()=>setActiveGenre(genre), __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, genre))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 mb-12", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, commonProblems[activeGenre].map((problem, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `bg-white bg-opacity-20 p-6 rounded-lg hover:bg-opacity-30 transition-all duration-300 cursor-pointer shadow-lg ${selectedProblem === problem ? 'ring-4 ring-white' : ''}`, onClick: ()=>handleProblemClick(problem), __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-semibold mb-3", __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, problem)))), isLoading && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, "解決策を生成中...")), solution && /*#__PURE__*/ React.createElement("div", { className: "text-center bg-white bg-opacity-20 p-6 rounded-lg", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, "「", selectedProblem, "」の解決策:"), /*#__PURE__*/ React.createElement("p", { className: "text-lg mb-6", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, solution), audioUrl && /*#__PURE__*/ React.createElement("audio", { controls: true, className: "w-full max-w-md mx-auto", __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: audioUrl, type: "audio/mpeg", __source: { fileName: "", lineNumber: 99, columnNumber: 17 }, __self: this }), "お使いのブラウザは音声再生をサポートしていません。")))); }