function MainComponent() { const [userInput, setUserInput] = React.useState(''); const [loading, setLoading] = React.useState(false); const [results, setResults] = React.useState([]); const [seenMovies, setSeenMovies] = React.useState(new Set()); const handleSubmit = async ()=>{ if (userInput.trim()) { setLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: `あなたはプロの映画コメンテーターです。\n#制約条件に従い、私にとって最適な映画を提案してください。\n#制約条件\n#出力形式に従うこと\n#制限に従うこと\nあらすじは100字程度で簡潔かつ魅力的に記述すること\n**選んだ理由を200字程度で記述すること**\n#出力形式\n・おすすめの映画タイトル（英語の場合は邦題も）\n・公開年\n・放映時間\n・主演\n・あらすじ\n**・選んだ理由**\n\n${userInput}` } ] }) }); const data = await response.json(); if (data.choices && data.choices[0].message.content) { const parsedResults = data.choices[0].message.content.split('\n').filter((item)=>item.trim() !== '' && !seenMovies.has(item)); setResults(parsedResults); setSeenMovies(new Set([ ...seenMovies, ...parsedResults ])); } } catch (error) { console.error('Error:', error); } finally{ setLoading(false); } } }; const handleReset = ()=>{ setUserInput(''); setResults([]); setSeenMovies(new Set()); }; const handleSeen = async ()=>{ if (userInput.trim()) { setLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: `あなたはプロの映画コメンテーターです。\n#制約条件に従い、私にとって最適な映画を提案してください。\n#制約条件\n#出力形式に従うこと\n#制限に従うこと\nあらすじは100字程度で簡潔かつ魅力的に記述すること\n**選んだ理由を200字程度で記述すること**\n#出力形式\n・おすすめの映画タイトル（英語の場合は邦題も）\n・公開年\n・放映時間\n・主演\n・あらすじ\n**・選んだ理由**\n\n${userInput}` } ] }) }); const data = await response.json(); if (data.choices && data.choices[0].message.content) { const parsedResults = data.choices[0].message.content.split('\n').filter((item)=>item.trim() !== '' && !seenMovies.has(item)); setResults(parsedResults); setSeenMovies(new Set([ ...seenMovies, ...parsedResults ])); } } catch (error) { console.error('Error:', error); } finally{ setLoading(false); } } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 flex flex-col items-center justify-center py-6", __source: { fileName: "", lineNumber: 82, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-lg w-[400px] max-w-full", __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-4", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, "今日観たい映画")), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "userInput", value: userInput, onChange: (e)=>setUserInput(e.target.value), placeholder: "好きなワード", className: "w-full p-2 border border-gray-300 rounded-md font-roboto", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex mt-2", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleSubmit, disabled: loading, className: "flex-1 mr-1 p-2 bg-blue-500 text-white rounded-md font-roboto", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, loading ? '検索中...' : '検索'), /*#__PURE__*/ React.createElement("button", { onClick: handleSeen, className: "flex-1 mx-1 p-2 bg-green-500 text-white rounded-md font-roboto", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, "観たことある"), /*#__PURE__*/ React.createElement("button", { onClick: handleReset, className: "flex-1 ml-1 p-2 bg-gray-500 text-white rounded-md font-roboto", __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this }, "リセット"))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 118, columnNumber: 9 }, __self: this }, results.length > 0 && /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside font-roboto", __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this }, results.map((result, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 122, columnNumber: 17 }, __self: this }, result)))))); }