webs-sdk 0.18.91 → 0.18.92

package/dist/components/ArtGenerator.js

@@ -1,701 +0,0 @@
-"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