webs-sdk 0.18.92 → 0.18.93

package/dist/components/ArtGenerator.js

@@ -0,0 +1,701 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_ART_STYLES = void 0;
+exports.ArtGenerator = ArtGenerator;
+exports.ArtGeneratorForYouCard = ArtGeneratorForYouCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const forYouFetch_1 = require("./for-you/api/forYouFetch");
+const ART_GENERATOR_CSS = `
+.artgen-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0;
+}
+@media (min-width: 1024px) {
+  .artgen-grid {
+    grid-template-columns: 380px 1fr;
+  }
+}
+.artgen-styles-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+}
+.artgen-collections-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+}
+@media (min-width: 640px) {
+  .artgen-collections-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+@media (min-width: 1024px) {
+  .artgen-collections-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+@media (min-width: 1280px) {
+  .artgen-collections-grid {
+    grid-template-columns: repeat(6, 1fr);
+  }
+}
+.artgen-carousel-scroll {
+  display: flex;
+  gap: 12px;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.artgen-carousel-scroll::-webkit-scrollbar {
+  display: none;
+}
+.artgen-carousel-item {
+  scroll-snap-align: start;
+  flex: 0 0 calc(50% - 6px);
+  min-width: 0;
+}
+`;
+exports.DEFAULT_ART_STYLES = [
+    {
+        key: 'no-style',
+        label: 'No style',
+        url: 'https://b2c-portales.s3.amazonaws.com/ForYou/ArtGeneratorStyles/Preview_NOStyle_AI2.png',
+        prompt: '',
+        negative_prompt: '',
+    },
+    {
+        key: 'papercraft-papercut collage',
+        label: 'Papercut',
+        url: 'https://b2c-portales.s3.amazonaws.com/ForYou/ArtGeneratorStyles/v2/Preview_PaperCutCollage.png',
+        prompt: 'papercut collage of {prompt} . mixed media, textured paper, overlapping, asymmetrical, abstract, vibrant',
+        negative_prompt: 'photo, 3D, realistic, drawing, painting, high detail, disfigured',
+    },
+    {
+        key: 'sai-craft clay',
+        label: 'Play Doh',
+        url: 'https://b2c-portales.s3.amazonaws.com/ForYou/ArtGeneratorStyles/v2/Preview_PlayDoh.png',
+        prompt: 'play-doh style {prompt} . sculpture, clay art, centered composition, Claymation',
+        negative_prompt: 'sloppy, messy, grainy, highly detailed, ultra textured, photo',
+    },
+    {
+        key: 'game-minecraft',
+        label: 'Minecraft',
+        url: 'https://b2c-portales.s3.amazonaws.com/ForYou/ArtGeneratorStyles/v2/Preview_MineCraft.png',
+        prompt: 'Minecraft style {prompt} . blocky, pixelated, vibrant colors, recognizable characters and objects, game assets',
+        negative_prompt: 'smooth, realistic, detailed, photorealistic, noise, blurry, deformed',
+    },
+    {
+        key: 'artstyle-abstract expressionism',
+        label: 'Expressionist',
+        url: 'https://b2c-portales.s3.amazonaws.com/ForYou/ArtGeneratorStyles/v2/Preview_Expressionist.png',
+        prompt: 'abstract expressionist painting {prompt} . energetic brushwork, bold colors, abstract forms, expressive, emotional',
+        negative_prompt: 'realistic, photorealistic, low contrast, plain, simple, monochrome',
+    },
+    {
+        key: 'game-retro game',
+        label: 'Retro Game',
+        url: 'https://b2c-portales.s3.amazonaws.com/ForYou/ArtGeneratorStyles/v2/Preview_RetroGame.png',
+        prompt: 'retro game art {prompt} . 16-bit, vibrant colors, pixelated, nostalgic, charming, fun',
+        negative_prompt: 'realistic, photorealistic, 35mm film, deformed, glitch, low contrast, noisy',
+    },
+    {
+        key: 'artstyle-watercolor',
+        label: 'Watercolor',
+        url: 'https://b2c-portales.s3.amazonaws.com/ForYou/ArtGeneratorStyles/v2/Preview_Watercolor.png',
+        prompt: 'watercolor painting {prompt} . vibrant, beautiful, painterly, detailed, textural, artistic',
+        negative_prompt: 'anime, photorealistic, 35mm film, deformed, glitch, low contrast, noisy',
+    },
+    {
+        key: 'sai-line art',
+        label: 'Line Art',
+        url: 'https://b2c-portales.s3.amazonaws.com/ForYou/ArtGeneratorStyles/v2/Preview_LineArt.png',
+        prompt: 'line art drawing {prompt} . professional, sleek, modern, minimalist, graphic, line art, vector graphics',
+        negative_prompt: 'anime, photorealistic, 35mm film, deformed, glitch, blurry, noisy, off-center, deformed, cross-eyed, closed eyes, bad anatomy, ugly, disfigured, mutated, realism, realistic, impressionism, expressionism, oil, acrylic',
+    },
+    {
+        key: 'sai-comic book',
+        label: 'Comic Book',
+        url: 'https://b2c-portales.s3.amazonaws.com/ForYou/ArtGeneratorStyles/v2/Preview_ComicBook.png',
+        prompt: 'comic {prompt} . graphic illustration, comic art, graphic novel art, vibrant, highly detailed',
+        negative_prompt: 'photograph, deformed, glitch, noisy, realistic, stock photo',
+    },
+    {
+        key: 'artstyle-art deco',
+        label: 'Art Deco',
+        url: 'https://b2c-portales.s3.amazonaws.com/ForYou/ArtGeneratorStyles/v2/Preview_ArtDeco.png',
+        prompt: 'art deco style {prompt} . geometric shapes, bold colors, luxurious, elegant, decorative, symmetrical, ornate, detailed',
+        negative_prompt: 'ugly, deformed, noisy, blurry, low contrast, realism, photorealistic, modernist, minimalist',
+    },
+    {
+        key: 'misc-kawaii',
+        label: 'Kawaii',
+        url: 'https://b2c-portales.s3.amazonaws.com/ForYou/ArtGeneratorStyles/v2/Preview_Kawaii.png',
+        prompt: 'kawaii style {prompt} . cute, adorable, brightly colored, cheerful, anime influence, highly detailed',
+        negative_prompt: 'dark, scary, realistic, monochrome, abstract',
+    },
+    {
+        key: 'misc-stained glass',
+        label: 'Stained Glass',
+        url: 'https://b2c-portales.s3.amazonaws.com/ForYou/ArtGeneratorStyles/v2/Preview_StainedGlass.png',
+        prompt: 'stained glass style {prompt} . vibrant, beautiful, translucent, intricate, detailed',
+        negative_prompt: 'ugly, deformed, noisy, blurry, low contrast, realism, photorealistic',
+    },
+    {
+        key: 'misc-disco',
+        label: 'Disco',
+        url: 'https://b2c-portales.s3.amazonaws.com/ForYou/ArtGeneratorStyles/v2/Preview_Disco.png',
+        prompt: 'disco-themed {prompt} . vibrant, groovy, retro 70s style, shiny disco balls, neon lights, dance floor, highly detailed',
+        negative_prompt: 'minimalist, rustic, monochrome, contemporary, simplistic',
+    },
+    {
+        key: 'photo-neon noir',
+        label: 'Neon Noir',
+        url: 'https://b2c-portales.s3.amazonaws.com/ForYou/ArtGeneratorStyles/v2/Preview_NeonNoir.png',
+        prompt: 'neon noir {prompt} . cyberpunk, dark, rainy streets, neon signs, high contrast, low light, vibrant, highly detailed',
+        negative_prompt: 'bright, sunny, daytime, low contrast, black and white, sketch, watercolor',
+    },
+    {
+        key: 'photo-film noir',
+        label: 'Film Noir',
+        url: 'https://b2c-portales.s3.amazonaws.com/ForYou/ArtGeneratorStyles/v2/Preview_Film.png',
+        prompt: 'film noir style {prompt} . monochrome, high contrast, dramatic shadows, 1940s style, mysterious, cinematic',
+        negative_prompt: 'ugly, deformed, noisy, blurry, low contrast, realism, photorealistic, vibrant, colorful',
+    },
+];
+const defaultTheme = {
+    primaryColor: '#6C63FF',
+    primaryHoverColor: '#5a52d5',
+    backgroundColor: '#1A1A2E',
+    cardBackground: '#252540',
+    borderColor: '#3A3A5C',
+    textColor: '#FFFFFF',
+    textSecondaryColor: '#A0A0C0',
+    tabActiveColor: '#6C63FF',
+    disabledColor: '#4A4A6A',
+};
+const defaultTexts = {
+    createTabLabel: 'Create',
+    collectionsTabLabel: 'Collections',
+    examplesTitle: 'Try these examples',
+    tryButton: 'Try',
+    promptTitle: 'Describe the desired image',
+    promptTooltip: 'The more detailed the description, the better the result.',
+    promptPlaceholder: 'A mysterious enchanted forest at night, illuminated by moonlight...',
+    createButton: 'Create',
+    generatingButton: 'Generating...',
+    resultTitle: 'Your result',
+    emptyResultText: 'Your generated image will appear here',
+    startAgainButton: 'Start again',
+    downloadButton: 'Download',
+    stylesTitle: 'Choose an artistic style',
+    loadingText: 'Loading...',
+    errorText: 'An error occurred. Please try again.',
+    queueText: 'In queue',
+    recommendedLabel: 'Recommended',
+};
+function buildFinalPrompt(userPrompt, style) {
+    if (!style.prompt)
+        return userPrompt;
+    return style.prompt.replace('{prompt}', userPrompt);
+}
+function ArtGenerator({ config, styles = exports.DEFAULT_ART_STYLES, examples: examplesProp, collections: collectionsProp, theme = {}, texts = {}, onGenerationComplete, onDownload, onError, }) {
+    const t = Object.assign(Object.assign({}, defaultTexts), texts);
+    const th = Object.assign(Object.assign({}, defaultTheme), theme);
+    const tabActive = th.tabActiveColor || th.primaryColor;
+    (0, react_1.useEffect)(() => {
+        const id = 'artgenerator-styles';
+        if (document.getElementById(id))
+            return;
+        const style = document.createElement('style');
+        style.id = id;
+        style.textContent = ART_GENERATOR_CSS;
+        document.head.appendChild(style);
+    }, []);
+    const [activeTab, setActiveTab] = (0, react_1.useState)('create');
+    const [dynamicExamples, setDynamicExamples] = (0, react_1.useState)([]);
+    const [loadingExamples, setLoadingExamples] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (examplesProp && examplesProp.length > 0)
+            return;
+        const hasFetch = config.examplesTags || config.examplesContents || config.apiBaseUrl || config.apiUrl;
+        if (!hasFetch)
+            return;
+        const load = async () => {
+            var _a;
+            setLoadingExamples(true);
+            try {
+                const apiUrl = (_a = config.apiUrl) !== null && _a !== void 0 ? _a : (config.apiBaseUrl ? `${config.apiBaseUrl}/api/get_contents_by_tags` : '/api/get_contents_by_tags');
+                const tags = config.examplesTags
+                    ? (Array.isArray(config.examplesTags) ? config.examplesTags : [config.examplesTags])
+                    : undefined;
+                const items = await (0, forYouFetch_1.forYouFetch)({
+                    apiUrl,
+                    apiBaseUrl: config.apiBaseUrl,
+                    tags,
+                    contents: config.examplesContents,
+                    locale: config.locale || 'en',
+                    website_id: config.website_id,
+                });
+                const mapped = items
+                    .map((item, idx) => {
+                    var _a, _b, _c;
+                    return ({
+                        id: (_a = item.id) !== null && _a !== void 0 ? _a : idx,
+                        image: item.thumbnail || ((_b = item.images) === null || _b === void 0 ? void 0 : _b.img1) || item.imageUrl || '',
+                        description: ((_c = item.metadata) === null || _c === void 0 ? void 0 : _c.prompt) || item.title || '',
+                    });
+                })
+                    .filter((e) => e.image);
+                setDynamicExamples(mapped);
+            }
+            catch (err) {
+                console.error('[ArtGenerator] Error loading examples:', err);
+            }
+            finally {
+                setLoadingExamples(false);
+            }
+        };
+        load();
+    }, [config.apiUrl, config.apiBaseUrl, config.examplesTags]);
+    const examples = examplesProp && examplesProp.length > 0 ? examplesProp : dynamicExamples;
+    const [dynamicCollections, setDynamicCollections] = (0, react_1.useState)([]);
+    const [loadingCollections, setLoadingCollections] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (collectionsProp && collectionsProp.length > 0)
+            return;
+        const hasFetch = config.collectionsTags || config.collectionsContents;
+        if (!hasFetch)
+            return;
+        const load = async () => {
+            var _a;
+            setLoadingCollections(true);
+            try {
+                const apiUrl = (_a = config.apiUrl) !== null && _a !== void 0 ? _a : (config.apiBaseUrl ? `${config.apiBaseUrl}/api/get_contents_by_tags` : '/api/get_contents_by_tags');
+                if (config.collectionsContents && config.collectionsContents.length > 0) {
+                    const categories = [];
+                    for (const preset of config.collectionsContents) {
+                        const items = await (0, forYouFetch_1.forYouFetch)({
+                            apiUrl,
+                            apiBaseUrl: config.apiBaseUrl,
+                            contents: [preset],
+                            locale: config.locale || 'en',
+                            website_id: config.website_id,
+                        });
+                        const mapped = items.map((item, idx) => {
+                            var _a, _b, _c;
+                            return ({
+                                id: (_a = item.id) !== null && _a !== void 0 ? _a : idx,
+                                image: item.thumbnail || ((_b = item.images) === null || _b === void 0 ? void 0 : _b.img1) || item.imageUrl || '',
+                                title: item.title || '',
+                                description: ((_c = item.metadata) === null || _c === void 0 ? void 0 : _c.prompt) || item.description || '',
+                            });
+                        }).filter((i) => i.image);
+                        if (mapped.length === 0)
+                            continue;
+                        let categoryLabel;
+                        const presetAny = preset;
+                        if (presetAny.tags && Array.isArray(presetAny.tags) && presetAny.tags.length > 0) {
+                            const tag = presetAny.tags[0];
+                            categoryLabel = tag.charAt(0).toUpperCase() + tag.slice(1).replace(/-/g, ' ');
+                        }
+                        else {
+                            categoryLabel = t.recommendedLabel;
+                        }
+                        const existing = categories.find(c => c.label === categoryLabel);
+                        if (existing) {
+                            existing.items.push(...mapped);
+                        }
+                        else {
+                            categories.push({ label: categoryLabel, items: mapped });
+                        }
+                    }
+                    setDynamicCollections(categories);
+                    return;
+                }
+                const tags = config.collectionsTags
+                    ? (Array.isArray(config.collectionsTags) ? config.collectionsTags : [config.collectionsTags])
+                    : undefined;
+                if (tags && tags.length > 1) {
+                    const categories = [];
+                    for (const tag of tags) {
+                        const items = await (0, forYouFetch_1.forYouFetch)({
+                            apiUrl,
+                            apiBaseUrl: config.apiBaseUrl,
+                            tags: [tag],
+                            locale: config.locale || 'en',
+                            website_id: config.website_id,
+                        });
+                        const mapped = items.map((item, idx) => {
+                            var _a, _b, _c;
+                            return ({
+                                id: (_a = item.id) !== null && _a !== void 0 ? _a : idx,
+                                image: item.thumbnail || ((_b = item.images) === null || _b === void 0 ? void 0 : _b.img1) || item.imageUrl || '',
+                                title: item.title || '',
+                                description: ((_c = item.metadata) === null || _c === void 0 ? void 0 : _c.prompt) || item.description || '',
+                            });
+                        }).filter((i) => i.image);
+                        if (mapped.length > 0) {
+                            const label = tag.charAt(0).toUpperCase() + tag.slice(1).replace(/-/g, ' ');
+                            categories.push({ label, items: mapped });
+                        }
+                    }
+                    setDynamicCollections(categories);
+                }
+                else {
+                    const items = await (0, forYouFetch_1.forYouFetch)({
+                        apiUrl,
+                        apiBaseUrl: config.apiBaseUrl,
+                        tags,
+                        locale: config.locale || 'en',
+                        website_id: config.website_id,
+                    });
+                    const mapped = items.map((item, idx) => {
+                        var _a, _b, _c;
+                        return ({
+                            id: (_a = item.id) !== null && _a !== void 0 ? _a : idx,
+                            image: item.thumbnail || ((_b = item.images) === null || _b === void 0 ? void 0 : _b.img1) || item.imageUrl || '',
+                            title: item.title || '',
+                            description: ((_c = item.metadata) === null || _c === void 0 ? void 0 : _c.prompt) || item.description || '',
+                        });
+                    }).filter((i) => i.image);
+                    if (mapped.length > 0) {
+                        const label = (tags === null || tags === void 0 ? void 0 : tags[0])
+                            ? tags[0].charAt(0).toUpperCase() + tags[0].slice(1).replace(/-/g, ' ')
+                            : t.recommendedLabel;
+                        setDynamicCollections([{ label, items: mapped }]);
+                    }
+                }
+            }
+            catch (err) {
+                console.error('[ArtGenerator] Error loading collections:', err);
+            }
+            finally {
+                setLoadingCollections(false);
+            }
+        };
+        load();
+    }, [config.apiUrl, config.apiBaseUrl, config.collectionsTags, config.collectionsContents]);
+    const collections = collectionsProp && collectionsProp.length > 0 ? collectionsProp : dynamicCollections;
+    const [prompt, setPrompt] = (0, react_1.useState)('');
+    const [selectedStyle, setSelectedStyle] = (0, react_1.useState)(styles[0]);
+    const carouselRef = (0, react_1.useRef)(null);
+    const [isGenerating, setIsGenerating] = (0, react_1.useState)(false);
+    const [generatedImageUrl, setGeneratedImageUrl] = (0, react_1.useState)(null);
+    const [progressPercent, setProgressPercent] = (0, react_1.useState)(null);
+    const [queuePosition, setQueuePosition] = (0, react_1.useState)(null);
+    const [genError, setGenError] = (0, react_1.useState)(null);
+    const pollRef = (0, react_1.useRef)(null);
+    const timeoutRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const el = carouselRef.current;
+        if (!el)
+            return;
+        const onWheel = (e) => {
+            if (Math.abs(e.deltaX) > Math.abs(e.deltaY))
+                return;
+            e.preventDefault();
+            el.scrollLeft += e.deltaY;
+        };
+        el.addEventListener('wheel', onWheel, { passive: false });
+        return () => el.removeEventListener('wheel', onWheel);
+    }, []);
+    const clearPolls = (0, react_1.useCallback)(() => {
+        if (pollRef.current) {
+            clearInterval(pollRef.current);
+            pollRef.current = null;
+        }
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+    }, []);
+    (0, react_1.useEffect)(() => () => clearPolls(), [clearPolls]);
+    const handleStartAgain = () => {
+        clearPolls();
+        setGeneratedImageUrl(null);
+        setProgressPercent(null);
+        setQueuePosition(null);
+        setGenError(null);
+        setIsGenerating(false);
+        setPrompt('');
+    };
+    const handleCreate = async () => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        if (!prompt.trim() || isGenerating)
+            return;
+        clearPolls();
+        setIsGenerating(true);
+        setGeneratedImageUrl(null);
+        setProgressPercent(0);
+        setQueuePosition(null);
+        setGenError(null);
+        const finalPrompt = buildFinalPrompt(prompt, selectedStyle);
+        const negativePrompt = selectedStyle.negative_prompt;
+        const pollInterval = (_a = config.pollInterval) !== null && _a !== void 0 ? _a : 3000;
+        const maxPollTime = (_b = config.maxPollTime) !== null && _b !== void 0 ? _b : 120000;
+        const generateUrl = (_c = config.generateApiUrl) !== null && _c !== void 0 ? _c : (config.generateBaseUrl ? `${config.generateBaseUrl.replace(/\/$/, '')}/get_art_generation` : null);
+        if (!generateUrl) {
+            setGenError(t.errorText);
+            setIsGenerating(false);
+            return;
+        }
+        try {
+            const genRes = await fetch(generateUrl, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(Object.assign(Object.assign(Object.assign({ prompt: finalPrompt, negative_prompt: negativePrompt }, (config.userId && { us_id: config.userId })), (config.userLogin && { us_login: config.userLogin })), (config.wid && { wid: config.wid }))),
+            });
+            if (!genRes.ok)
+                throw new Error(`Generation error: ${genRes.status}`);
+            const genData = await genRes.json();
+            console.log('[ArtGenerator] generate response:', JSON.stringify(genData));
+            if ((genData === null || genData === void 0 ? void 0 : genData.success) === 0 || (genData === null || genData === void 0 ? void 0 : genData.success) === false) {
+                throw new Error((genData === null || genData === void 0 ? void 0 : genData.msg) || (genData === null || genData === void 0 ? void 0 : genData.error) || 'Generation failed');
+            }
+            const jobId = ((_d = genData === null || genData === void 0 ? void 0 : genData.data) === null || _d === void 0 ? void 0 : _d.md5) ||
+                ((_e = genData === null || genData === void 0 ? void 0 : genData.data) === null || _e === void 0 ? void 0 : _e.request_id) ||
+                ((_f = genData === null || genData === void 0 ? void 0 : genData.data) === null || _f === void 0 ? void 0 : _f.job_id) ||
+                ((_g = genData === null || genData === void 0 ? void 0 : genData.data) === null || _g === void 0 ? void 0 : _g.id) ||
+                (genData === null || genData === void 0 ? void 0 : genData.md5) ||
+                (genData === null || genData === void 0 ? void 0 : genData.request_id) ||
+                (genData === null || genData === void 0 ? void 0 : genData.job_id) ||
+                (genData === null || genData === void 0 ? void 0 : genData.id);
+            console.log('[ArtGenerator] jobId extracted:', jobId);
+            if (!jobId)
+                throw new Error(`No job ID received. Response: ${JSON.stringify(genData)}`);
+            timeoutRef.current = setTimeout(() => {
+                clearPolls();
+                setIsGenerating(false);
+                setGenError(t.errorText);
+                onError === null || onError === void 0 ? void 0 : onError(t.errorText);
+            }, maxPollTime);
+            const base = (_j = (_h = config.generateBaseUrl) === null || _h === void 0 ? void 0 : _h.replace(/\/$/, '')) !== null && _j !== void 0 ? _j : '';
+            const poll = async () => {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+                try {
+                    const queueUrl = (_a = config.queueApiUrl) !== null && _a !== void 0 ? _a : (base ? `${base}/get_queue_position` : null);
+                    if (queueUrl) {
+                        const queueRes = await fetch(queueUrl, {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify(Object.assign(Object.assign({ md5: jobId }, (config.userId && { us_id: config.userId })), (config.wid && { wid: config.wid }))),
+                        });
+                        if (queueRes.ok) {
+                            const queueData = await queueRes.json();
+                            const pos = (_d = (_c = (_b = queueData === null || queueData === void 0 ? void 0 : queueData.data) === null || _b === void 0 ? void 0 : _b.position) !== null && _c !== void 0 ? _c : queueData === null || queueData === void 0 ? void 0 : queueData.position) !== null && _d !== void 0 ? _d : null;
+                            setQueuePosition(pos);
+                        }
+                    }
+                    const progressUrl = (_e = config.progressApiUrl) !== null && _e !== void 0 ? _e : (base ? `${base}/get_arg_pct` : null);
+                    if (!progressUrl)
+                        return;
+                    const pctRes = await fetch(progressUrl, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(Object.assign(Object.assign({ md5: jobId }, (config.userId && { us_id: config.userId })), (config.wid && { wid: config.wid }))),
+                    });
+                    if (!pctRes.ok)
+                        return;
+                    const pctData = await pctRes.json();
+                    const pct = (_h = (_g = (_f = pctData === null || pctData === void 0 ? void 0 : pctData.data) === null || _f === void 0 ? void 0 : _f.pct) !== null && _g !== void 0 ? _g : pctData === null || pctData === void 0 ? void 0 : pctData.pct) !== null && _h !== void 0 ? _h : 0;
+                    setProgressPercent(pct);
+                    if (pct >= 100) {
+                        clearPolls();
+                        const resultUrl = (_j = config.resultApiUrl) !== null && _j !== void 0 ? _j : (base ? `${base}/get_art_job` : null);
+                        if (!resultUrl)
+                            throw new Error('No result URL configured');
+                        const jobRes = await fetch(resultUrl, {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify(Object.assign(Object.assign({ md5: jobId }, (config.userId && { us_id: config.userId })), (config.wid && { wid: config.wid }))),
+                        });
+                        if (!jobRes.ok)
+                            throw new Error('Error fetching final image');
+                        const jobData = await jobRes.json();
+                        const imageUrl = ((_k = jobData === null || jobData === void 0 ? void 0 : jobData.data) === null || _k === void 0 ? void 0 : _k.url) || (jobData === null || jobData === void 0 ? void 0 : jobData.url) || (jobData === null || jobData === void 0 ? void 0 : jobData.image) || ((_l = jobData === null || jobData === void 0 ? void 0 : jobData.data) === null || _l === void 0 ? void 0 : _l.image);
+                        if (!imageUrl)
+                            throw new Error('No image URL received');
+                        setGeneratedImageUrl(imageUrl);
+                        setProgressPercent(100);
+                        setIsGenerating(false);
+                        onGenerationComplete === null || onGenerationComplete === void 0 ? void 0 : onGenerationComplete(imageUrl, finalPrompt);
+                    }
+                }
+                catch (err) {
+                    console.error('[ArtGenerator] Polling error:', err);
+                }
+            };
+            poll();
+            pollRef.current = setInterval(poll, pollInterval);
+        }
+        catch (err) {
+            clearPolls();
+            const msg = err instanceof Error ? err.message : t.errorText;
+            setGenError(msg);
+            setIsGenerating(false);
+            onError === null || onError === void 0 ? void 0 : onError(msg);
+        }
+    };
+    const handleDownload = async () => {
+        if (!generatedImageUrl)
+            return;
+        if (onDownload) {
+            onDownload(generatedImageUrl);
+            return;
+        }
+        try {
+            const res = await fetch(generatedImageUrl);
+            const blob = await res.blob();
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `art-generator-${Date.now()}.png`;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+        }
+        catch (_a) {
+            window.open(generatedImageUrl, '_blank');
+        }
+    };
+    const renderProgressBar = () => {
+        if (progressPercent === null)
+            return null;
+        return ((0, jsx_runtime_1.jsxs)("div", { style: { width: '100%', marginTop: '12px' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', justifyContent: 'space-between', marginBottom: '4px' }, children: (0, jsx_runtime_1.jsx)("span", { style: { fontSize: '12px', color: th.textSecondaryColor }, children: queuePosition !== null && queuePosition > 0
+                            ? `${t.queueText} #${queuePosition}`
+                            : `${progressPercent}%` }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%', height: '6px', backgroundColor: th.borderColor, borderRadius: '3px', overflow: 'hidden' }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                            height: '100%',
+                            width: `${progressPercent}%`,
+                            backgroundColor: th.primaryColor,
+                            borderRadius: '3px',
+                            transition: 'width 0.3s ease',
+                        } }) })] }));
+    };
+    const renderCreateTab = () => ((0, jsx_runtime_1.jsxs)("div", { className: "artgen-grid", children: [(0, jsx_runtime_1.jsxs)("div", { style: { padding: '24px', borderRight: `1px solid ${th.borderColor}`, display: 'flex', flexDirection: 'column', gap: '24px' }, children: [(loadingExamples || examples.length > 0) && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { style: { fontSize: '16px', fontWeight: 700, color: th.textColor, margin: '0 0 12px 0' }, children: t.examplesTitle }), loadingExamples ? ((0, jsx_runtime_1.jsx)("p", { style: { color: th.textSecondaryColor, fontSize: '13px' }, children: t.loadingText })) : ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative' }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => { if (carouselRef.current)
+                                            carouselRef.current.scrollBy({ left: -260, behavior: 'smooth' }); }, style: {
+                                            position: 'absolute', left: '4px', top: '40%', transform: 'translateY(-50%)',
+                                            zIndex: 10, width: '32px', height: '32px', borderRadius: '50%', border: 'none',
+                                            backgroundColor: `${th.primaryColor}dd`, color: '#FFFFFF',
+                                            display: 'flex', alignItems: 'center', justifyContent: 'center',
+                                            cursor: 'pointer', boxShadow: '0 2px 8px rgba(0,0,0,0.5)',
+                                            transition: 'background-color 0.2s',
+                                        }, onMouseEnter: (e) => { e.currentTarget.style.backgroundColor = th.primaryColor; }, onMouseLeave: (e) => { e.currentTarget.style.backgroundColor = `${th.primaryColor}dd`; }, children: (0, jsx_runtime_1.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("polyline", { points: "15 18 9 12 15 6" }) }) }), (0, jsx_runtime_1.jsx)("div", { ref: carouselRef, style: {
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            gap: '12px',
+                                            overflowX: 'auto',
+                                            overflowY: 'hidden',
+                                            scrollSnapType: 'x mandatory',
+                                            WebkitOverflowScrolling: 'touch',
+                                            scrollbarWidth: 'none',
+                                            msOverflowStyle: 'none',
+                                            width: '100%',
+                                        }, children: examples.map((ex) => ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                                flexShrink: 0,
+                                                width: 'calc(50% - 6px)',
+                                                scrollSnapAlign: 'start',
+                                            }, children: [(0, jsx_runtime_1.jsx)("div", { style: { borderRadius: '8px', overflow: 'hidden', marginBottom: '8px' }, children: (0, jsx_runtime_1.jsx)("img", { src: ex.image, alt: ex.description, style: { width: '100%', height: '140px', objectFit: 'cover', display: 'block' } }) }), (0, jsx_runtime_1.jsx)("p", { style: { fontSize: '12px', color: th.textSecondaryColor, margin: '0 0 8px 0', lineHeight: 1.4, overflow: 'hidden', display: '-webkit-box', WebkitLineClamp: 3, WebkitBoxOrient: 'vertical' }, children: ex.description }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => setPrompt(ex.description), style: {
+                                                        width: '100%', padding: '6px 12px', borderRadius: '20px', border: `1px solid ${th.primaryColor}`,
+                                                        backgroundColor: 'transparent', color: th.primaryColor, fontSize: '12px', fontWeight: 600,
+                                                        cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '4px',
+                                                    }, children: [(0, jsx_runtime_1.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [(0, jsx_runtime_1.jsx)("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), (0, jsx_runtime_1.jsx)("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })] }), t.tryButton] })] }, ex.id))) }), (0, jsx_runtime_1.jsx)("button", { onClick: () => { if (carouselRef.current)
+                                            carouselRef.current.scrollBy({ left: 260, behavior: 'smooth' }); }, style: {
+                                            position: 'absolute', right: '4px', top: '40%', transform: 'translateY(-50%)',
+                                            zIndex: 10, width: '32px', height: '32px', borderRadius: '50%', border: 'none',
+                                            backgroundColor: `${th.primaryColor}dd`, color: '#FFFFFF',
+                                            display: 'flex', alignItems: 'center', justifyContent: 'center',
+                                            cursor: 'pointer', boxShadow: '0 2px 8px rgba(0,0,0,0.5)',
+                                            transition: 'background-color 0.2s',
+                                        }, onMouseEnter: (e) => { e.currentTarget.style.backgroundColor = th.primaryColor; }, onMouseLeave: (e) => { e.currentTarget.style.backgroundColor = `${th.primaryColor}dd`; }, children: (0, jsx_runtime_1.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("polyline", { points: "9 18 15 12 9 6" }) }) })] }))] })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { style: { fontSize: '16px', fontWeight: 700, color: th.textColor, margin: '0 0 12px 0' }, children: t.stylesTitle }), (0, jsx_runtime_1.jsx)("div", { className: "artgen-styles-grid", children: styles.map((style) => {
+                                    const isActive = selectedStyle.key === style.key;
+                                    const isNoStyle = style.key === 'no-style';
+                                    return ((0, jsx_runtime_1.jsx)("button", { onClick: () => setSelectedStyle(style), title: style.label, style: {
+                                            padding: 0,
+                                            border: `2px solid ${isActive ? th.primaryColor : th.borderColor}`,
+                                            borderRadius: '8px',
+                                            overflow: 'hidden',
+                                            cursor: 'pointer',
+                                            backgroundColor: 'transparent',
+                                            transition: 'border-color 0.2s',
+                                            position: 'relative',
+                                        }, children: isNoStyle ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                                                width: '100%',
+                                                aspectRatio: '1',
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                                backgroundColor: isActive ? `${th.primaryColor}22` : 'rgba(255,255,255,0.06)',
+                                            }, children: (0, jsx_runtime_1.jsxs)("svg", { width: "36", height: "36", viewBox: "0 0 24 24", fill: "none", stroke: isActive ? th.primaryColor : th.textSecondaryColor, strokeWidth: "1.5", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "10" }), (0, jsx_runtime_1.jsx)("line", { x1: "4.93", y1: "4.93", x2: "19.07", y2: "19.07" })] }) })) : ((0, jsx_runtime_1.jsx)("img", { src: style.url, alt: style.label, style: { width: '100%', aspectRatio: '1', objectFit: 'cover', display: 'block' } })) }, style.key));
+                                }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: { padding: '24px', display: 'flex', flexDirection: 'column', gap: '20px' }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }, children: [(0, jsx_runtime_1.jsx)("h3", { style: { fontSize: '16px', fontWeight: 700, color: th.textColor, margin: 0 }, children: t.promptTitle }), (0, jsx_runtime_1.jsx)("span", { title: t.promptTooltip, style: { width: '18px', height: '18px', borderRadius: '50%', border: `1px solid ${th.textSecondaryColor}`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '11px', color: th.textSecondaryColor, cursor: 'help', flexShrink: 0 }, children: "i" })] }), (0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative' }, children: [(0, jsx_runtime_1.jsx)("textarea", { value: prompt, onChange: (e) => {
+                                            setPrompt(e.target.value);
+                                            e.target.style.height = 'auto';
+                                            e.target.style.height = `${e.target.scrollHeight}px`;
+                                        }, placeholder: t.promptPlaceholder, disabled: isGenerating, rows: 4, style: {
+                                            width: '100%',
+                                            padding: '12px',
+                                            paddingRight: '100px',
+                                            borderRadius: '8px',
+                                            border: `1px solid ${th.borderColor}`,
+                                            backgroundColor: th.cardBackground,
+                                            color: th.textColor,
+                                            fontSize: '14px',
+                                            resize: 'none',
+                                            outline: 'none',
+                                            lineHeight: 1.5,
+                                            boxSizing: 'border-box',
+                                            opacity: isGenerating ? 0.6 : 1,
+                                            overflowY: 'hidden',
+                                            minHeight: '100px',
+                                        } }), (0, jsx_runtime_1.jsx)("button", { onClick: handleCreate, disabled: !prompt.trim() || isGenerating, style: {
+                                            position: 'absolute', right: '8px', bottom: '8px',
+                                            padding: '8px 20px', borderRadius: '20px', border: 'none',
+                                            backgroundColor: (!prompt.trim() || isGenerating) ? th.disabledColor : th.primaryColor,
+                                            color: '#FFFFFF', fontSize: '14px', fontWeight: 700, cursor: (!prompt.trim() || isGenerating) ? 'not-allowed' : 'pointer',
+                                            display: 'flex', alignItems: 'center', gap: '6px',
+                                            transition: 'background-color 0.2s',
+                                        }, onMouseEnter: (e) => { if (prompt.trim() && !isGenerating)
+                                            e.currentTarget.style.backgroundColor = th.primaryHoverColor; }, onMouseLeave: (e) => { if (prompt.trim() && !isGenerating)
+                                            e.currentTarget.style.backgroundColor = th.primaryColor; }, children: isGenerating ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", style: { animation: 'artgen-spin 1s linear infinite' }, children: [(0, jsx_runtime_1.jsx)("polyline", { points: "23 4 23 10 17 10" }), (0, jsx_runtime_1.jsx)("polyline", { points: "1 20 1 14 7 14" }), (0, jsx_runtime_1.jsx)("path", { d: "M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" })] }), t.generatingButton] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: (0, jsx_runtime_1.jsx)("polygon", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2" }) }), t.createButton] })) })] }), isGenerating && renderProgressBar()] }), (0, jsx_runtime_1.jsxs)("div", { style: { flex: 1 }, children: [(0, jsx_runtime_1.jsx)("h3", { style: { fontSize: '16px', fontWeight: 700, color: th.textColor, margin: '0 0 12px 0' }, children: t.resultTitle }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                    minHeight: '320px', borderRadius: '12px', border: `1px solid ${th.borderColor}`,
+                                    backgroundColor: th.cardBackground, overflow: 'hidden', position: 'relative',
+                                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                                }, children: genError ? ((0, jsx_runtime_1.jsx)("p", { style: { color: '#F87171', fontSize: '14px', textAlign: 'center', padding: '24px' }, children: genError })) : generatedImageUrl ? ((0, jsx_runtime_1.jsx)("img", { src: generatedImageUrl, alt: "Generated result", style: { width: '100%', height: 'auto', display: 'block' } })) : isGenerating ? ((0, jsx_runtime_1.jsxs)("div", { style: { textAlign: 'center', color: th.textSecondaryColor, padding: '24px' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { width: '48px', height: '48px', border: `3px solid ${th.borderColor}`, borderTop: `3px solid ${th.primaryColor}`, borderRadius: '50%', margin: '0 auto 16px', animation: 'artgen-spin 1s linear infinite' } }), (0, jsx_runtime_1.jsx)("p", { style: { margin: 0, fontSize: '14px' }, children: t.generatingButton })] })) : ((0, jsx_runtime_1.jsx)("p", { style: { color: th.textSecondaryColor, fontSize: '14px', textAlign: 'center', padding: '24px' }, children: t.emptyResultText })) }), generatedImageUrl && !isGenerating && ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '12px', marginTop: '12px', justifyContent: 'flex-end' }, children: [(0, jsx_runtime_1.jsxs)("button", { onClick: handleStartAgain, style: {
+                                            padding: '10px 20px', borderRadius: '20px', border: `1px solid ${th.borderColor}`,
+                                            backgroundColor: 'transparent', color: th.textColor, fontSize: '14px', fontWeight: 600,
+                                            cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '6px',
+                                        }, children: [(0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [(0, jsx_runtime_1.jsx)("polyline", { points: "1 4 1 10 7 10" }), (0, jsx_runtime_1.jsx)("path", { d: "M3.51 15a9 9 0 1 0 .49-3" })] }), t.startAgainButton] }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleDownload, style: {
+                                            padding: '10px 20px', borderRadius: '20px', border: 'none',
+                                            backgroundColor: th.primaryColor, color: '#FFFFFF', fontSize: '14px', fontWeight: 600,
+                                            cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '6px',
+                                        }, onMouseEnter: (e) => { e.currentTarget.style.backgroundColor = th.primaryHoverColor; }, onMouseLeave: (e) => { e.currentTarget.style.backgroundColor = th.primaryColor; }, children: [(0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [(0, jsx_runtime_1.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), (0, jsx_runtime_1.jsx)("polyline", { points: "7 10 12 15 17 10" }), (0, jsx_runtime_1.jsx)("line", { x1: "12", y1: "15", x2: "12", y2: "3" })] }), t.downloadButton] })] }))] })] })] }));
+    const renderCollectionsTab = () => ((0, jsx_runtime_1.jsx)("div", { style: { padding: '24px' }, children: loadingCollections ? ((0, jsx_runtime_1.jsx)("p", { style: { color: th.textSecondaryColor, fontSize: '14px' }, children: t.loadingText })) : collections.length === 0 ? ((0, jsx_runtime_1.jsx)("p", { style: { color: th.textSecondaryColor, fontSize: '14px' }, children: t.emptyResultText })) : (collections.map((cat, catIdx) => ((0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '32px' }, children: [(0, jsx_runtime_1.jsx)("h3", { style: { fontSize: '18px', fontWeight: 700, color: th.textColor, margin: '0 0 16px 0' }, children: cat.label }), (0, jsx_runtime_1.jsx)("div", { className: "artgen-collections-grid", children: cat.items.map((item) => ((0, jsx_runtime_1.jsxs)("div", { style: { borderRadius: '8px', overflow: 'hidden', backgroundColor: th.cardBackground, border: `1px solid ${th.borderColor}` }, children: [(0, jsx_runtime_1.jsx)("img", { src: item.image, alt: item.title || '', style: { width: '100%', aspectRatio: '3/4', objectFit: 'cover', display: 'block' } }), (0, jsx_runtime_1.jsxs)("div", { style: { padding: '8px' }, children: [item.title && ((0, jsx_runtime_1.jsx)("p", { style: { margin: '0 0 6px', fontSize: '12px', color: th.textSecondaryColor, lineHeight: 1.4, overflow: 'hidden', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' }, children: item.title })), (0, jsx_runtime_1.jsxs)("button", { onClick: () => { setPrompt(item.description || item.title || ''); setActiveTab('create'); }, style: {
+                                            width: '100%', padding: '6px', borderRadius: '16px', border: `1px solid ${th.primaryColor}`,
+                                            backgroundColor: 'transparent', color: th.primaryColor, fontSize: '12px', fontWeight: 600,
+                                            cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '4px',
+                                        }, children: [(0, jsx_runtime_1.jsxs)("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [(0, jsx_runtime_1.jsx)("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), (0, jsx_runtime_1.jsx)("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })] }), t.tryButton] })] })] }, item.id))) })] }, catIdx)))) }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { backgroundColor: th.backgroundColor, borderRadius: '12px', overflow: 'hidden' }, children: [(0, jsx_runtime_1.jsx)("style", { children: `@keyframes artgen-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }` }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: '8px', padding: '16px 24px', borderBottom: `1px solid ${th.borderColor}` }, children: [
+                    { id: 'create', label: t.createTabLabel },
+                    { id: 'collections', label: t.collectionsTabLabel },
+                ].map(tab => ((0, jsx_runtime_1.jsx)("button", { onClick: () => setActiveTab(tab.id), style: {
+                        padding: '8px 20px', borderRadius: '20px',
+                        border: activeTab === tab.id ? 'none' : `1px solid ${th.borderColor}`,
+                        backgroundColor: activeTab === tab.id ? tabActive : 'transparent',
+                        color: activeTab === tab.id ? '#FFFFFF' : th.textSecondaryColor,
+                        fontSize: '14px', fontWeight: 600, cursor: 'pointer',
+                        transition: 'all 0.2s',
+                    }, children: tab.label }, tab.id))) }), activeTab === 'create' ? renderCreateTab() : renderCollectionsTab()] }));
+}
+function ArtGeneratorForYouCard({ title, description, ctaText, ctaHref, desktopImage, mobileImage, imageAlt = '', imageOnRight = true, titleColor = '#001B5E', descriptionColor = '#001B5E', ctaColor = '#6C63FF', ctaHoverColor = '#5a52d5', backgroundColor = '#F9F9F9', paddingClass = 'py-12 md:py-16 lg:py-20', }) {
+    const effectiveMobileImage = mobileImage || desktopImage;
+    const imageColumn = ((0, jsx_runtime_1.jsxs)("div", { className: `${imageOnRight ? '' : 'order-2 md:order-1'} overflow-hidden`, children: [(0, jsx_runtime_1.jsx)("img", { src: desktopImage, alt: imageAlt, className: "hidden md:block w-full h-auto object-contain" }), (0, jsx_runtime_1.jsx)("img", { src: effectiveMobileImage, alt: imageAlt, className: "block md:hidden w-full h-auto object-contain" })] }));
+    const contentColumn = ((0, jsx_runtime_1.jsxs)("div", { className: `${imageOnRight ? '' : 'order-1 md:order-2'} text-center md:text-left`, children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-2xl md:text-3xl font-bold mb-4 md:mb-6", style: { color: titleColor }, children: title }), (0, jsx_runtime_1.jsx)("p", { className: "text-base md:text-lg mb-6 md:mb-8 leading-relaxed", style: { color: descriptionColor }, children: description }), (0, jsx_runtime_1.jsx)("a", { href: ctaHref, className: "inline-block text-white font-bold text-lg px-8 py-4 rounded-full transition-colors duration-300 cursor-pointer", style: { backgroundColor: ctaColor }, onMouseEnter: (e) => { e.currentTarget.style.backgroundColor = ctaHoverColor; }, onMouseLeave: (e) => { e.currentTarget.style.backgroundColor = ctaColor; }, children: ctaText })] }));
+    return ((0, jsx_runtime_1.jsx)("section", { className: "w-full", style: { backgroundColor }, children: (0, jsx_runtime_1.jsx)("div", { className: `container mx-auto px-4 ${paddingClass}`, children: (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 lg:gap-16 items-start", children: imageOnRight ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [contentColumn, imageColumn] }) : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [imageColumn, contentColumn] }) }) }) }));
+}
+exports.default = ArtGenerator;
+//# sourceMappingURL=ArtGenerator.js.map