function MainComponent() { const [inputText, setInputText] = React.useState(''); const [summaryText, setSummaryText] = React.useState(''); const [isSummarizing, setIsSummarizing] = React.useState(false); const [isCopied, setIsCopied] = React.useState(false); const [usedModel, setUsedModel] = React.useState(''); const handleInputChange = (e)=>{ setInputText(e.target.value); }; const handleSummarize = async ()=>{ setIsSummarizing(true); const integrations = [ { name: 'ANTHROPIC_CLAUDE', url: '/integrations/anthropic-claude/' }, { name: 'CHAT_GPT', url: '/integrations/chat-gpt/conversationgpt4' }, { name: 'GOOGLE_GEMINI_1_5', url: '/integrations/google-gemini-1-5/' }, { name: 'ANTHROPIC_CLAUDE_SONNET', url: '/integrations/anthropic-claude-sonnet/' }, { name: 'ANTHROPIC_CLAUDE_HAIKU', url: '/integrations/anthropic-claude-haiku/' }, { name: 'GOOGLE_GEMINI', url: '/integrations/google-gemini/' } ]; for (const integration of integrations){ try { const response = await fetch(integration.url, { method: 'POST', body: JSON.stringify({ messages: [ { role: 'user', content: `日本語として適切で読みやすい日本語で要約してください。出力は要約した文章のみでそれ以外は絶対に出力しないでください:\n\n${inputText}` } ] }) }); const data = await response.json(); setSummaryText(data.choices[0].message.content); setUsedModel(integration.name); break; } catch (error) { console.error(`Error with ${integration.name}:`, error); } } setIsSummarizing(false); }; const handleCopy = ()=>{ navigator.clipboard.writeText(summaryText); setIsCopied(true); setTimeout(()=>setIsCopied(false), 2000); }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4 font-noto-sans bg-gray-100 min-h-screen", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto bg-white p-8 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-6 text-center", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-blue-600", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, "テキスト"), /*#__PURE__*/ React.createElement("span", { className: "text-orange-500", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "要約"), /*#__PURE__*/ React.createElement("span", { className: "text-green-600", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "ツール")), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "inputText", rows: "12", className: "w-full p-3 border rounded text-lg focus:outline-none focus:ring-2 focus:ring-blue-400", placeholder: "長いテキストをここに貼り付けてください...", value: inputText, onChange: handleInputChange, __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-8 py-3 bg-gradient-to-r from-blue-500 to-green-500 text-white rounded-full text-xl font-semibold transition duration-300 hover:shadow-lg transform hover:-translate-y-1", onClick: handleSummarize, disabled: isSummarizing, __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, isSummarizing ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this }), "要約中...") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-compress-alt mr-2", __source: { fileName: "", lineNumber: 86, columnNumber: 17 }, __self: this }), "要約する"))), summaryText && /*#__PURE__*/ React.createElement("div", { className: "mt-10 p-6 bg-blue-50 rounded-lg relative", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4 flex items-center", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle text-green-500 mr-2", __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }), "要約結果"), /*#__PURE__*/ React.createElement("p", { className: "text-lg leading-relaxed", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, summaryText), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 mt-2", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, "使用モデル: ", usedModel), /*#__PURE__*/ React.createElement("button", { className: "absolute top-4 right-4 px-4 py-2 bg-blue-500 text-white rounded-full text-sm font-semibold transition duration-300 hover:bg-blue-600", onClick: handleCopy, __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }, isCopied ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check mr-2", __source: { fileName: "", lineNumber: 107, columnNumber: 19 }, __self: this }), "コピーしました") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-copy mr-2", __source: { fileName: "", lineNumber: 112, columnNumber: 19 }, __self: this }), "コピー"))))); }

テキスト要約ツール