function MainComponent() { const [searchQuery, setSearchQuery] = React.useState(''); const [generatedImage, setGeneratedImage] = React.useState(null); const [chatResponse, setChatResponse] = React.useState(null); const [claudeResponse, setClaudeResponse] = React.useState(null); const [isLoading, setIsLoading] = React.useState(false); const [activeTab, setActiveTab] = React.useState('stableDiffusion'); const handleSearch = (e)=>{ e.preventDefault(); setIsLoading(true); if (activeTab === 'stableDiffusion') { setTimeout(()=>{ setGeneratedImage(`https://source.unsplash.com/400x300/?${encodeURIComponent(searchQuery)}`); setIsLoading(false); }, 2000); } else if (activeTab === 'chatGPT') { setTimeout(()=>{ setChatResponse(`ChatGPT response to: "${searchQuery}"`); setIsLoading(false); }, 2000); } else if (activeTab === 'claude') { setTimeout(()=>{ setClaudeResponse(`Claude response to: "${searchQuery}"`); setIsLoading(false); }, 2000); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl px-4", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-6xl md:text-8xl font-bold text-center mb-8", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#4285F4]", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "な"), /*#__PURE__*/ React.createElement("span", { className: "text-[#EA4335]", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "ん"), /*#__PURE__*/ React.createElement("span", { className: "text-[#FBBC05]", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "て"), /*#__PURE__*/ React.createElement("span", { className: "text-[#4285F4]", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "こ"), /*#__PURE__*/ React.createElement("span", { className: "text-[#34A853]", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "っ"), /*#__PURE__*/ React.createElement("span", { className: "text-[#EA4335]", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "た")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-4", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab('stableDiffusion'), className: `px-4 py-2 mr-2 rounded ${activeTab === 'stableDiffusion' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`, __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "Stable Diffusion"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab('chatGPT'), className: `px-4 py-2 mr-2 rounded ${activeTab === 'chatGPT' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`, __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "ChatGPT"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab('claude'), className: `px-4 py-2 rounded ${activeTab === 'claude' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`, __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "Claude")), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSearch, className: "w-full", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), className: "w-full px-5 py-3 text-lg border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm", placeholder: activeTab === 'stableDiffusion' ? "Stable Diffusionで画像を生成" : activeTab === 'chatGPT' ? "ChatGPTに質問する" : "Claudeに質問する", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search text-xl", __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this })))), isLoading && /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-center", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-4xl text-blue-500", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this })), activeTab === 'stableDiffusion' && generatedImage && !isLoading && /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: generatedImage, alt: `Stable Diffusionで生成された${searchQuery}の画像`, className: "w-full rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this })), activeTab === 'chatGPT' && chatResponse && !isLoading && /*#__PURE__*/ React.createElement("div", { className: "mt-8 p-4 bg-white rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, chatResponse)), activeTab === 'claude' && claudeResponse && !isLoading && /*#__PURE__*/ React.createElement("div", { className: "mt-8 p-4 bg-white rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, claudeResponse)), /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-center text-sm text-gray-600", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, activeTab === 'stableDiffusion' ? 'Stable Diffusionを使用して画像を生成しています' : activeTab === 'chatGPT' ? 'ChatGPTを使用して回答を生成しています' : 'Claudeを使用して回答を生成しています'))); }

なんてこった