function MainComponent() { const [prompt, setPrompt] = React.useState(''); const [responses, setResponses] = React.useState([]); const [selectedResponse, setSelectedResponse] = React.useState(null); const [loading, setLoading] = React.useState(false); const aiModels = [ "GPT-4", "Claude 3", "Bard", "Gemini", "Copilot" ]; const handleInputChange = (e)=>{ setPrompt(e.target.value); }; const fetchResponses = async ()=>{ setLoading(true); const responses = await Promise.all(aiModels.map(async (model)=>{ const startTime = performance.now(); await new Promise((resolve)=>setTimeout(resolve, Math.random() * 2000)); const endTime = performance.now(); return { model, response: `Response from ${model}`, time: `${(endTime - startTime).toFixed(2)}ms` }; })); setResponses(responses); setSelectedResponse(responses[0]); setLoading(false); }; const handleButtonClick = ()=>{ fetchResponses(); }; const selectResponse = (model)=>{ const response = responses.find((r)=>r.model === model); setSelectedResponse(response); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md w-full bg-white p-4 shadow-md rounded-lg", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "prompt", value: prompt, onChange: handleInputChange, placeholder: "Enter a prompt...", className: "border border-gray-300 rounded-md w-full p-2 focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleButtonClick, className: `w-full py-2 px-4 mt-4 rounded-md font-bold ${loading ? 'bg-gray-500' : 'bg-blue-500 hover:bg-blue-700'} text-white`, disabled: loading, __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, loading ? "Loading..." : "比較開始")), /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl w-full mt-8", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, aiModels.map((model)=>/*#__PURE__*/ React.createElement("div", { key: model, className: "w-1/5", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { onClick: ()=>selectResponse(model), className: `rounded-lg p-4 cursor-pointer ${selectedResponse?.model === model ? 'bg-blue-200' : 'bg-gray-200'} font-roboto`, __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, model)))), selectedResponse && /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 mt-4 shadow-md rounded-lg", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-lg font-roboto", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, selectedResponse.model, " Response"), /*#__PURE__*/ React.createElement("p", { className: "mt-2 font-roboto", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, selectedResponse.response), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 mt-1 font-roboto", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "Response time: ", selectedResponse.time)))); }