function MainComponent() { const [keyword, setKeyword] = React.useState(''); const [summaries, setSummaries] = React.useState(null); const [isLoading, setIsLoading] = React.useState(false); const handleSubmit = async (e)=>{ e.preventDefault(); setIsLoading(true); const response = await fetch('/api/integrated-search-summarizer', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ keyword }) }); const data = await response.json(); setSummaries(data); setIsLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4 font-noto-sans", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, "検索結果の要約"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mb-8", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "keyword", value: keyword, onChange: (e)=>setKeyword(e.target.value), placeholder: "検索キーワードを入力", className: "border border-gray-300 rounded-l px-4 py-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-400", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-r", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "検索"))), isLoading ? /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this })) : summaries ? /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, Object.entries(summaries).map(([llm, summaryList])=>/*#__PURE__*/ React.createElement("div", { key: llm, className: "mb-8", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-2 font-noto-sans", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, llm, "の要約結果"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-6", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, summaryList.map((summary, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mb-2 font-noto-sans", __source: { fileName: "", lineNumber: 51, columnNumber: 19 }, __self: this }, summary)))))) : null, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, ` @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .animate-spin { animation: spin 1s linear infinite; } `)); }