function MainComponent() { const [url, setUrl] = React.useState(''); const [content, setContent] = React.useState(''); const [summary, setSummary] = React.useState(''); const [loading, setLoading] = React.useState(false); const [loadingStage, setLoadingStage] = React.useState(''); const [error, setError] = React.useState(''); const [copySuccess, setCopySuccess] = React.useState(''); const handleURLChange = (e)=>{ setUrl(e.target.value); }; const extractContent = async ()=>{ setLoading(true); setLoadingStage('抽出中！'); setError(''); try { const response = await fetch('/integrations/web-scraping/post', { method: 'POST', body: JSON.stringify({ url, return_text: true }), headers: { 'Content-Type': 'application/json' } }); const textContent = await response.text(); if (textContent) { setContent(textContent); } else { throw new Error(); } } catch (e) { setError('抽出できませんでした'); setContent(''); } finally{ setLoadingStage(''); setLoading(false); } }; const summarizeContent = async ()=>{ if (!content) return; setLoading(true); setLoadingStage('要約中！'); setError(''); try { const response = await fetch('/integrations/anthropic-claude/', { method: 'POST', body: JSON.stringify({ messages: [ { role: "user", content: content } ] }), headers: { 'Content-Type': 'application/json' } }); const data = await response.json(); if (data.choices && data.choices.length > 0 && data.choices[0].message.content) { setSummary(data.choices[0].message.content); } else { throw new Error(); } } catch (e) { setError('要約できませんでした'); setSummary(''); } finally{ setLoadingStage(''); setLoading(false); } }; const copyToClipboard = ()=>{ navigator.clipboard.writeText(summary).then(()=>{ setCopySuccess('コピーしました！'); setTimeout(()=>setCopySuccess(''), 3000); }).catch((err)=>{ setError('コピーに失敗しました'); }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#121212] text-white font-roboto", __source: { fileName: "", lineNumber: 86, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./okamoto-taro.jpg", alt: "岡本太郎の画像", className: "inline-block w-48 h-48 md:w-60 md:h-60 lg:w-72 lg:h-72 rounded-full shadow-xl mx-auto mb-4", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-5xl lg:text-6xl font-bold", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, "要約爆発")), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { id: "url-input", type: "text", name: "url", value: url, onChange: handleURLChange, className: "p-4 w-full border-none rounded-md bg-[#252525] text-white placeholder-gray-500", placeholder: "https://", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ extractContent().then(()=>summarizeContent()); }, className: "px-8 py-4 bg-gradient-to-r from-blue-500 to-teal-500 text-white rounded-lg hover:bg-gradient-to-r hover:from-blue-700 hover:to-teal-700 transition-colors mb-6 shadow-xl font-bold", disabled: loading, __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, loading ? loadingStage : '抽出'))), error && /*#__PURE__*/ React.createElement("div", { className: "text-center py-4 text-xl md:text-2xl font-bold bg-gradient-to-r from-red-500 to-pink-600 rounded-lg shadow-xl my-6 mx-auto w-3/4", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, error), copySuccess && /*#__PURE__*/ React.createElement("div", { className: "fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 py-4 px-6 text-3xl font-bold bg-gradient-to-r from-green-500 to-blue-600 rounded-lg shadow-2xl", __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }, copySuccess), summary && /*#__PURE__*/ React.createElement("div", { className: "container mx-auto my-8 p-6 bg-gradient-to-br from-green-500 to-blue-500 text-white rounded-lg shadow-2xl", __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, summary), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: copyToClipboard, className: "mt-4 px-6 py-3 bg-gradient-to-r from-green-700 to-blue-700 text-white rounded hover:bg-gradient-to-r hover:from-green-800 hover:to-blue-800 transition-colors", __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, "要約をコピー")))); }