function MainComponent() { const [url, setUrl] = React.useState(''); const [siteInfo, setSiteInfo] = React.useState(''); const [lyrics, setLyrics] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const handleUrlChange = (e)=>{ setUrl(e.target.value); }; const handleSearch = async ()=>{ setIsLoading(true); try { const response = await fetch('/integrations/web-scraping/post', { method: 'POST', body: JSON.stringify({ url: url, getText: true }) }); const data = await response.text(); setSiteInfo(data); const gptResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ { role: "user", content: `以下のサイト情報をもとに、音楽生成AI用の歌詞を作成してください。各センテンスは短くしてください。${data}` } ] }) }); const gptData = await gptResponse.json(); setLyrics(gptData.choices[0].message.content); } catch (error) { console.error('Error:', error); } finally{ setIsLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-8 font-noto-sans", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-6 text-center", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, "サイト情報から歌詞生成"), /*#__PURE__*/ React.createElement("div", { className: "flex mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: url, onChange: handleUrlChange, placeholder: "URLを入力してください", className: "flex-grow border border-gray-300 rounded-l px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500", name: "url", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSearch, disabled: isLoading, className: "bg-blue-500 text-white px-6 py-2 rounded-r hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-400", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 62, columnNumber: 24 }, __self: this }) : '検索')), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "サイト情報"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-4 rounded h-64 overflow-auto", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, siteInfo)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "生成された歌詞"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-4 rounded h-64 overflow-auto whitespace-pre-wrap", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, lyrics)))); }