function ImageSettings({ onWidthChange, onHeightChange, onStepsChange, onGuidanceScaleChange, width = 512, height = 512, steps = 30, guidanceScale = 7.5 }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4 p-4 rounded-lg bg-gray-100", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto min-w-[120px]", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, "Width:"), /*#__PURE__*/ React.createElement("input", { type: "range", min: "128", max: "1024", step: "64", value: width, onChange: (e)=>onWidthChange(Number(e.target.value)), className: "w-full", name: "width", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto min-w-[64px]", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, width, "px")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto min-w-[120px]", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "Height:"), /*#__PURE__*/ React.createElement("input", { type: "range", min: "128", max: "1024", step: "64", value: height, onChange: (e)=>onHeightChange(Number(e.target.value)), className: "w-full", name: "height", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto min-w-[64px]", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, height, "px")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto min-w-[120px]", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, "Steps:"), /*#__PURE__*/ React.createElement("input", { type: "range", min: "10", max: "150", step: "1", value: steps, onChange: (e)=>onStepsChange(Number(e.target.value)), className: "w-full", name: "steps", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto min-w-[64px]", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, steps)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto min-w-[120px]", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, "Guidance Scale:"), /*#__PURE__*/ React.createElement("input", { type: "range", min: "1", max: "20", step: "0.1", value: guidanceScale, onChange: (e)=>onGuidanceScaleChange(Number(e.target.value)), className: "w-full", name: "guidance-scale", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto min-w-[64px]", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, guidanceScale))); } function ImageSettingsStory() { const [width, setWidth] = useState(512); const [height, setHeight] = useState(512); const [steps, setSteps] = useState(30); const [guidanceScale, setGuidanceScale] = useState(7.5); return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 83, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ImageSettings, { width: width, height: height, steps: steps, guidanceScale: guidanceScale, onWidthChange: setWidth, onHeightChange: setHeight, onStepsChange: setSteps, onGuidanceScaleChange: setGuidanceScale, __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this })); } function ModelSelector({ selectedModel, onModelSelect }) { const models = [ { id: "sd3.5", name: "SD 3.5", preview: "/sd3-preview.jpg" }, { id: "sdxl", name: "SDXL", preview: "/sdxl-preview.jpg" } ]; const [error, setError] = useState(null); const [upload, { loading }] = useUpload(); const [file, setFile] = useState(null); const [image, setImage] = useState(null); const onSubmit = useCallback(async ()=>{ const { url, mimeType, error } = await upload({ file }); if (error) { setError(error); return; } if (mimeType.startsWith("image/")) { setImage(url); } }, [ file ]); return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: selectedModel, onChange: (e)=>onModelSelect(e.target.value), className: "w-full p-2.5 text-gray-700 bg-white border rounded-md shadow-sm outline-none appearance-none", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, models.map((model)=>/*#__PURE__*/ React.createElement("option", { key: model.id, value: model.id, className: "flex items-center", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, model.name))), /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 right-0 flex items-center h-full px-2 pointer-events-none", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-down text-gray-400", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, models.map((model)=>model.id === selectedModel && /*#__PURE__*/ React.createElement("div", { key: model.id, className: "flex items-center", __source: { fileName: "", lineNumber: 51, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: model.preview, alt: `${model.name} preview`, className: "w-[50px] h-[50px] object-cover rounded", __source: { fileName: "", lineNumber: 52, columnNumber: 19 }, __self: this }))))), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: (e)=>{ if (e.target.files) { setFile(e.target.files[0]); } }, className: "mt-4", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500", __source: { fileName: "", lineNumber: 73, columnNumber: 17 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { onClick: onSubmit, disabled: loading, className: "mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, loading ? "Uploading..." : "Upload Image"), image && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image, alt: "Uploaded preview", className: "w-full rounded", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }))); } function ModelSelectorStory() { const [selectedModel, setSelectedModel] = useState("sd3.5"); return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 94, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ModelSelector, { selectedModel: selectedModel, onModelSelect: setSelectedModel, __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this })); } function ResultsDisplay({ image, settings = {}, onDownload }) { return /*#__PURE__*/ React.createElement("div", { className: "w-[300px] rounded-lg overflow-hidden shadow-lg bg-white", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, image && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image, alt: "AI generated artwork", className: "w-full h-[300px] object-cover", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-3", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 12, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-600 font-medium", __source: { fileName: "", lineNumber: 13, columnNumber: 15 }, __self: this }, "Settings Used:"), /*#__PURE__*/ React.createElement("button", { onClick: onDownload, className: "bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600", __source: { fileName: "", lineNumber: 16, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-2", __source: { fileName: "", lineNumber: 20, columnNumber: 17 }, __self: this }), "Download")), /*#__PURE__*/ React.createElement("div", { className: "space-y-1", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, Object.entries(settings).map(([key, value])=>/*#__PURE__*/ React.createElement("div", { key: key, className: "flex justify-between text-sm", __source: { fileName: "", lineNumber: 26, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-500", __source: { fileName: "", lineNumber: 27, columnNumber: 19 }, __self: this }, key, ":"), /*#__PURE__*/ React.createElement("span", { className: "text-gray-700", __source: { fileName: "", lineNumber: 28, columnNumber: 19 }, __self: this }, value))))))); } function ResultsDisplayStory() { const sampleSettings = { Model: "Stable Diffusion v3", Style: "Photorealistic", Steps: "30", Size: "512x512" }; const handleDownload = ()=>{ // Download logic would go here }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ResultsDisplay, { image: "/sample-image.jpg", settings: sampleSettings, onDownload: handleDownload, __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this })); } function PromptInput({ onSubmit, negativePrompt, prompt, disabled }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4 w-full max-w-2xl", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "prompt", className: "w-full h-32 p-4 border border-gray-300 rounded-lg font-inter text-lg", placeholder: "Enter your prompt here", value: prompt, onChange: (e)=>onSubmit({ prompt: e.target.value, negativePrompt }), __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "negativePrompt", type: "text", className: "w-full p-2 border border-gray-300 rounded-lg font-inter", placeholder: "Enter negative prompt (optional)", value: negativePrompt, onChange: (e)=>onSubmit({ prompt, negativePrompt: e.target.value }), __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { disabled: disabled, onClick: ()=>onSubmit({ prompt, negativePrompt }), className: "bg-blue-500 text-white font-inter px-6 py-2 rounded-lg hover:bg-blue-600 disabled:bg-gray-300", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, "Generate")); } function PromptInputStory() { const [state, setState] = useState({ prompt: "", negativePrompt: "" }); return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PromptInput, { prompt: state.prompt, negativePrompt: state.negativePrompt, onSubmit: setState, disabled: !state.prompt, __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this })); } function MainComponent() { return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-roboto mb-8 text-center", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "Local Stable Diffusion"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col lg:flex-row gap-8", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null)), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null)), /*#__PURE__*/ React.createElement(React.Fragment, null)), /*#__PURE__*/ React.createElement("div", { className: "lg:w-1/4", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null)))); }