function BackToHomeButton({ onClick, label = "BACK TO HOME" }) { return /*#__PURE__*/ React.createElement("button", { onClick: onClick, className: "mt-8 px-6 py-2.5 bg-[#666] text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-[#555] hover:shadow-lg focus:bg-[#555] focus:shadow-lg focus:outline-none focus:ring-0 active:bg-[#444] active:shadow-lg transition duration-150 ease-in-out", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, label); } function BackToHomeButtonStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(BackToHomeButton, { onClick: ()=>console.log('Navigate to home'), __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this })); } function AiImageGeneration({ onClick, icon, title, description }) { return /*#__PURE__*/ React.createElement("button", { onClick: onClick, className: "block p-6 rounded-lg shadow-lg bg-white max-w-sm text-center hover:shadow-xl transition-shadow duration-200", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl mb-4", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, icon), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-[#333] mb-2", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "text-[#666]", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, description)); } function AiImageGenerationStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(AiImageGeneration, { onClick: ()=>{}, icon: /*#__PURE__*/ React.createElement("i", { className: "fa fa-image", __source: { fileName: "", lineNumber: 18, columnNumber: 15 } }), title: "Image Generation", description: "Create and explore AI generated images", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this })); } function MainComponent() { const [page, setPage] = React.useState(""); const [selectedDataPoint, setSelectedDataPoint] = React.useState(null); const renderHome = ()=>/*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-[#F4F6F8]", __source: { fileName: "", lineNumber: 6, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "mb-8 text-4xl font-bold text-[#333]", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, "Welcome to our Web App"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-8", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(AiImageGeneration, { onClick: ()=>setPage("imageGeneration"), icon: /*#__PURE__*/ React.createElement("i", { className: "fa fa-image", __source: { fileName: "", lineNumber: 9, columnNumber: 77 } }), title: "Image Generation", description: "Create and explore AI generated images.", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(AiImageGeneration, { onClick: ()=>setPage("dataExploration"), icon: /*#__PURE__*/ React.createElement("i", { className: "fa fa-chart-bar", __source: { fileName: "", lineNumber: 10, columnNumber: 77 } }), title: "Data Exploration", description: "Dive into data analysis and visualization.", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }))); const renderImageGeneration = ()=>/*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-[#F4F6F8]", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "mb-6 text-5xl font-bold text-[#333]", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, "Generate Your Image"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center bg-white p-6 rounded-lg shadow-lg w-full max-w-4xl space-y-5", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-full bg-gray-200 p-5 text-center", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, "Image Preview"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 w-full", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(PositiveNegativeInputs, { label: "Positive", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement(PositiveNegativeInputs, { label: "Negative", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "hyperparameters", className: "block text-sm font-bold text-[#333] mb-2", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, "Hyperparameters Settings:"), /*#__PURE__*/ React.createElement("textarea", { name: "hyperparameters", className: "block w-full p-2.5 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement(GenerateButtons, { __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement(BackToHomeButton, { onClick: ()=>setPage(""), __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this })); const renderDataExploration = ()=>/*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-[#F4F6F8]", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "mb-4 text-4xl font-bold text-[#333]", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, "Data Exploration"), /*#__PURE__*/ React.createElement(DataExplorationFeatures, { selectedDataPoint: selectedDataPoint, setSelectedDataPoint: setSelectedDataPoint, __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(BackToHomeButton, { onClick: ()=>setPage(""), __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this })); switch(page){ case "imageGeneration": return renderImageGeneration(); case "dataExploration": return renderDataExploration(); default: return renderHome(); } } function PositiveNegativeInputs({ label }) { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: label.toLowerCase(), className: "block text-sm font-bold text-[#333] mb-2", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, label, ":"), /*#__PURE__*/ React.createElement("input", { name: label.toLowerCase(), type: "text", className: "block w-full p-2.5 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("select", { multiple: true, className: "mt-2 w-full p-2.5 border border-gray-300 rounded-lg text-sm", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "Prompt Selection for ", label))); } function GenerateButtons() { return /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 66, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, "GENERATE"), /*#__PURE__*/ React.createElement("button", { className: "px-6 py-2.5 bg-red-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-red-700 hover:shadow-lg focus:bg-red-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-red-800 active:shadow-lg transition duration-150 ease-in-out", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, "BRUTE-FORCE GENERATE")); } function DataExplorationFeatures({ selectedDataPoint, setSelectedDataPoint }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl p-6 bg-white rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 75, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full mb-6 h-[500px] bg-[#EEEEEE]", __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, "2D Plot Image Area"), selectedDataPoint && /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-[200px] bg-gray-200 p-5", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, "Image #", selectedDataPoint.id, " Preview"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-[#333] mb-2", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, "Training Configs:"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, "Positive: ", selectedDataPoint.positive), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, "Negative: ", selectedDataPoint.negative), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, "Hyperparameters: ", selectedDataPoint.hyperparameters))))); }