function MainComponent() { const [userInput, setUserInput] = React.useState(''); const [recommendation, setRecommendation] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const handleInputChange = (e)=>{ setUserInput(e.target.value); }; const handleSubmit = async (e)=>{ e.preventDefault(); setIsLoading(true); try { const dbResponse = await fetch('/api/db/941', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ query: 'SELECT * FROM `chrysanthemum_info`' }) }); const dbData = await dbResponse.json(); const spotsInfo = dbData.results; const aiResponse = await fetch('/integrations/anthropic-claude-sonnet-3-5/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'system', content: '静岡県菊川市の観光スポットを紹介する「菊川ナビ」というウェブページの情報提供AIです。ユーザーのニーズや特徴を聞き出し、適したスポットの情報を提供してください。以下のスポット情報を参考にしてください：' + JSON.stringify(spotsInfo) }, { role: 'user', content: userInput } ] }) }); const aiData = await aiResponse.json(); setRecommendation(aiData.choices[0].message.content); } catch (error) { console.error('Error:', error); setRecommendation('エラーが発生しました。もう一度お試しください。'); } finally{ setIsLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-green-100 py-12 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center text-green-800 mb-8 font-noto-sans", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "菊川ナビ"), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-center text-green-700 mb-8 font-noto-sans", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, "静岡県菊川市の観光スポットをAIがおすすめします！"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mb-8", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: userInput, onChange: handleInputChange, placeholder: "あなたの興味や好みを教えてください", className: "w-full px-4 py-2 rounded-lg border border-green-300 focus:outline-none focus:ring-2 focus:ring-green-500 font-noto-sans", name: "userInput", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-4 w-full bg-green-500 text-white font-bold py-2 px-4 rounded-lg hover:bg-green-600 transition duration-300 font-noto-sans", disabled: isLoading, __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, isLoading ? '検索中...' : 'おすすめスポットを探す')), recommendation && /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-green-800 mb-4 font-noto-sans", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, "おすすめスポット"), /*#__PURE__*/ React.createElement("p", { className: "text-green-700 whitespace-pre-wrap font-noto-sans", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, recommendation)))); }