function MainComponent({ title, onSubmit, isLoading, errorMessage, summarizedContent }) { const [url, setUrl] = React.useState(''); const handleSubmit = (e)=>{ e.preventDefault(); onSubmit(url); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gradient-to-r from-[#667eea] to-[#764ba2]", __source: { fileName: "", lineNumber: 10, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md p-8 bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-poppins mb-4 text-center", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mb-4", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "url", className: "block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300", __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }, "ウェブサイトのURL"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "url", name: "url", value: url, onChange: (e)=>setUrl(e.target.value), className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-[#5a67d8] focus:border-[#5a67d8] block w-full p-2.5", required: true, __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: `text-white font-bold py-2 px-4 rounded ${isLoading ? 'bg-gray-400' : 'bg-[#5a67d8] hover:bg-[#434190]'}`, disabled: isLoading, __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, "抽出")), errorMessage && /*#__PURE__*/ React.createElement("p", { className: "text-red-500", __source: { fileName: "", lineNumber: 22, columnNumber: 26 }, __self: this }, errorMessage), summarizedContent && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 23, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-poppins mb-2", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "要約"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 font-poppins", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, summarizedContent)))); } function StoryComponent() { const [isLoading, setIsLoading] = React.useState(false); const [errorMessage, setErrorMessage] = React.useState(''); const [summarizedContent, setSummarizedContent] = React.useState(''); const fetchData = async (url)=>{ setIsLoading(true); setErrorMessage(''); try { const response = await fetch('/integrations/web-scraping/post', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ url }) }); const htmlContent = await response.text(); const summaryResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": htmlContent } ], system_prompt: 'このコンテンツを200文字程度で要約してください' }) }); const summaryData = await summaryResponse.json(); setSummarizedContent(summaryData.choices[0].message.content); } catch (error) { setErrorMessage('エラーが発生しました。もう一度お試しください。'); } setIsLoading(false); }; const demoData = { title: 'ウェブサイトサマリー', onSubmit: fetchData, isLoading, errorMessage, summarizedContent }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 83, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { ...demoData, __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this })); }