webs-sdk 0.14.0 → 0.14.2

package/dist/components/AvatarAI.js

@@ -0,0 +1,556 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarAI = AvatarAI;
+exports.AvatarAIForYouCard = AvatarAIForYouCard;
+exports.AvatarAIPage = AvatarAIPage;
+const react_1 = __importStar(require("react"));
+const AVATAR_AI_CSS = `
+.avatarai-styles-grid::-webkit-scrollbar { width: 6px; }
+.avatarai-styles-grid::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; }
+.avatarai-styles-grid::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
+`;
+const defaultStyles = [
+    { id: 1, name: 'Pirate', image: 'https://cdn.smarthubtech.net/upload/20240426_135427_99796_1_cuadrada.png' },
+    { id: 2, name: 'Superhero', image: 'https://cdn.smarthubtech.net/upload/20240426_135813_99797_1_cuadrada.png' },
+    { id: 3, name: 'Old', image: 'https://cdn.smarthubtech.net/upload/20240426_135253_99795_1_cuadrada.png' },
+    { id: 4, name: 'AI Robot', image: 'https://cdn.smarthubtech.net/upload/20240426_135125_99794_1_cuadrada.png' },
+    { id: 5, name: 'Viking', image: 'https://cdn.smarthubtech.net/upload/20230831_104318_96479_1_cuadrada.png' },
+    { id: 6, name: 'Fortnite', image: 'https://cdn.smarthubtech.net/upload/20230831_103218_96457_1_cuadrada.png' },
+    { id: 7, name: 'Elf', image: 'https://cdn.smarthubtech.net/upload/20230831_103031_96455_1_cuadrada.png' },
+    { id: 8, name: 'Anime', image: 'https://cdn.smarthubtech.net/upload/20230831_102634_95473_1_cuadrada.png' },
+    { id: 9, name: 'Modern Family', image: 'https://cdn.smarthubtech.net/upload/20230831_101847_95472_1_cuadrada.png' },
+    { id: 10, name: 'Baby', image: 'https://cdn.smarthubtech.net/upload/20230831_112829_95469_1_cuadrada.png' },
+    { id: 11, name: 'Barbie', image: 'https://cdn.smarthubtech.net/upload/20230831_100727_95448_1_cuadrada.png' },
+];
+const defaultMoods = [
+    { id: 1, value: 'normal', name: 'Normal', icon: 'https://b2c-portales.s3.amazonaws.com/Collections/default/icons/icon_normal.svg' },
+    { id: 2, value: 'smile', name: 'Smile', icon: 'https://b2c-portales.s3.amazonaws.com/Collections/default/icons/Icono_Feliz.svg' },
+    { id: 3, value: 'surprised', name: 'Surprised', icon: 'https://b2c-portales.s3.amazonaws.com/Collections/default/icons/Icono_Sorprendido.svg' },
+    { id: 4, value: 'angry', name: 'Angry', icon: 'https://b2c-portales.s3.amazonaws.com/Collections/default/icons/icono_Enojado.svg' },
+];
+const MOOD_PROMPTS = {
+    smile: {
+        prompt: '(((joy face, showcasing a bright smile))) ',
+        negative_prompt: '(((sad face, with tears forming in the eyes, ugly))) ',
+    },
+    surprised: {
+        prompt: '(((Face with wide open eyes and open mouth, and raised eyebrows, showing surprise, open mouth))) ',
+        negative_prompt: '(((face with unimpressed expression, closed mouth, showing lack of surprise, smile, ugly))) ',
+    },
+    angry: {
+        prompt: '(((angry face, closed mouth, furrowed brow, narrowed eyes, tight lips, expression of displeasure))) ',
+        negative_prompt: '(((calm face, open mouth, peaceful face, teeth, joy face, smile face, ugly))) ',
+    },
+    normal: {
+        prompt: ' ',
+        negative_prompt: ' ',
+    },
+};
+const defaultTheme = {
+    primaryColor: '#FF5500',
+    primaryHoverColor: '#ff1600',
+    textColor: '#001B5E',
+    backgroundColor: '#F9F9F9',
+    cardBackground: '#ffffff',
+};
+const defaultTexts = {
+    styleTitle: 'Style',
+    styleSectionTitle: 'Style',
+    moodsTitle: 'Moods',
+    backgroundTitle: 'Background colours',
+    uploadButton: 'UPLOAD IMAGE',
+    downloadButton: 'DOWNLOAD',
+    generateButton: 'GENERATE AVATAR',
+    generatingButton: 'GENERATING...',
+    resultTitle: 'Your result',
+    emptyStateText: 'Your generated avatar will appear here',
+    progressText: 'Progress',
+    successMessage: 'Avatar generated successfully!',
+    startAgainButton: 'START AGAIN',
+    startingText: 'Starting generation...',
+    preparingText: 'Preparing your avatar...',
+};
+function AvatarAI({ styles: stylesProp = [], stylesTag, apiBaseUrl, locale, moods = defaultMoods, theme = {}, texts = {}, config, onGenerationComplete, onError, }) {
+    var _a, _b;
+    const mergedTheme = Object.assign(Object.assign({}, defaultTheme), theme);
+    const mergedTexts = Object.assign(Object.assign({}, defaultTexts), texts);
+    const [dynamicStyles, setDynamicStyles] = (0, react_1.useState)([]);
+    (0, react_1.useEffect)(() => {
+        if (!stylesTag)
+            return;
+        const fetchStyles = async () => {
+            var _a;
+            try {
+                const base = apiBaseUrl || '/api';
+                const response = await fetch(`${base}/get_contents_by_tags`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ language: locale || 'en', tags: [stylesTag], limit: 50 }),
+                });
+                if (!response.ok)
+                    return;
+                const data = await response.json();
+                console.log(`🎭 AvatarAI - tag "${stylesTag}" response:`, data);
+                const items = ((_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.data) || [];
+                const mapped = items.map((item, idx) => {
+                    var _a, _b;
+                    return ({
+                        id: item.id || idx,
+                        name: item.title || `Style ${idx + 1}`,
+                        image: item.thumbnail || ((_a = item.images) === null || _a === void 0 ? void 0 : _a.img1) || item.imageUrl || '',
+                        prompt: ((_b = item.metadata) === null || _b === void 0 ? void 0 : _b.prompt) || '',
+                    });
+                }).filter((s) => s.image);
+                if (mapped.length > 0)
+                    setDynamicStyles(mapped);
+            }
+            catch (err) {
+                console.error('Error fetching avatar styles:', err);
+            }
+        };
+        fetchStyles();
+    }, [stylesTag, apiBaseUrl, locale]);
+    const styles = stylesProp.length > 0 ? stylesProp : dynamicStyles.length > 0 ? dynamicStyles : defaultStyles;
+    const [uploadedImage, setUploadedImage] = (0, react_1.useState)(null);
+    const [imageDimensions, setImageDimensions] = (0, react_1.useState)(null);
+    const [selectedStyle, setSelectedStyle] = (0, react_1.useState)(null);
+    const [selectedMood, setSelectedMood] = (0, react_1.useState)((_b = (_a = defaultMoods[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : null);
+    const [selectedBgColor, setSelectedBgColor] = (0, react_1.useState)(null);
+    const [recentColors, setRecentColors] = (0, react_1.useState)([]);
+    const [isGenerating, setIsGenerating] = (0, react_1.useState)(false);
+    const [generatedResult, setGeneratedResult] = (0, react_1.useState)(null);
+    const [progressPercent, setProgressPercent] = (0, react_1.useState)(null);
+    const [generatedImageUrl, setGeneratedImageUrl] = (0, react_1.useState)(null);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [isComparing, setIsComparing] = (0, react_1.useState)(false);
+    const fileInputRef = (0, react_1.useRef)(null);
+    const colorPickerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const id = 'avatarai-styles';
+        if (document.getElementById(id))
+            return;
+        const style = document.createElement('style');
+        style.id = id;
+        style.textContent = AVATAR_AI_CSS;
+        document.head.appendChild(style);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!(generatedResult === null || generatedResult === void 0 ? void 0 : generatedResult.md5) || progressPercent === 100 || !config)
+            return;
+        const checkProgress = async () => {
+            try {
+                const response = await fetch(config.apiEndpoints.progress, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        us_id: config.userId,
+                        us_login: config.userLogin,
+                        md5: generatedResult.md5,
+                    }),
+                });
+                const data = await response.json();
+                if (response.ok && data.success) {
+                    setProgressPercent(data.data.pct);
+                    console.log('🎭 AvatarAI progress:', data.data.pct + '%');
+                }
+            }
+            catch (err) {
+                console.error('Error checking avatar progress:', err);
+            }
+        };
+        checkProgress();
+        const interval = setInterval(checkProgress, 3000);
+        return () => clearInterval(interval);
+    }, [generatedResult, progressPercent, config]);
+    (0, react_1.useEffect)(() => {
+        if (!(generatedResult === null || generatedResult === void 0 ? void 0 : generatedResult.md5) || progressPercent !== 100 || generatedImageUrl || !config)
+            return;
+        const fetchFinalImage = async () => {
+            try {
+                const response = await fetch(config.apiEndpoints.getImage, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        us_id: config.userId,
+                        us_login: config.userLogin,
+                        md5: generatedResult.md5,
+                    }),
+                });
+                const data = await response.json();
+                if (response.ok && data.success && data.data) {
+                    const imageUrl = decodeURIComponent(data.data.s3_image);
+                    setGeneratedImageUrl(imageUrl);
+                    console.log('🎭 AvatarAI generated image:', imageUrl);
+                    onGenerationComplete === null || onGenerationComplete === void 0 ? void 0 : onGenerationComplete(imageUrl);
+                }
+            }
+            catch (err) {
+                console.error('Error fetching avatar image:', err);
+                const errorMsg = 'Error fetching generated avatar';
+                setError(errorMsg);
+                onError === null || onError === void 0 ? void 0 : onError(errorMsg);
+            }
+        };
+        fetchFinalImage();
+    }, [generatedResult, progressPercent, generatedImageUrl, config, onGenerationComplete, onError]);
+    const handleUploadClick = () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); };
+    const handleFileChange = (event) => {
+        var _a;
+        const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (!file)
+            return;
+        if (!file.type.startsWith('image/')) {
+            alert('Please select a valid image file');
+            return;
+        }
+        if (file.size > 5 * 1024 * 1024) {
+            alert('Image size should be less than 5MB');
+            return;
+        }
+        const reader = new FileReader();
+        reader.onloadend = () => {
+            const base64 = reader.result;
+            setUploadedImage(base64);
+            const img = new Image();
+            img.onload = () => setImageDimensions({ width: img.width, height: img.height });
+            img.src = base64;
+        };
+        reader.readAsDataURL(file);
+    };
+    const handleRemoveImage = () => {
+        setUploadedImage(null);
+        setImageDimensions(null);
+        if (fileInputRef.current)
+            fileInputRef.current.value = '';
+    };
+    const handleColorPickerClick = () => { var _a; return (_a = colorPickerRef.current) === null || _a === void 0 ? void 0 : _a.click(); };
+    const handleColorChange = (event) => {
+        const newColor = event.target.value;
+        setSelectedBgColor(newColor);
+        if (!recentColors.includes(newColor)) {
+            setRecentColors(prev => [newColor, ...prev].slice(0, 3));
+        }
+    };
+    const handleTransparentClick = () => setSelectedBgColor('transparent');
+    const handleRecentColorClick = (color) => setSelectedBgColor(color);
+    const handleGenerate = async () => {
+        if (!uploadedImage || !selectedStyle || !config)
+            return;
+        const selectedMoodItem = moods.find(m => m.id === selectedMood);
+        setIsGenerating(true);
+        setError(null);
+        setGeneratedResult(null);
+        setProgressPercent(null);
+        setGeneratedImageUrl(null);
+        const selectedStyleItem = styles.find(s => s.id === selectedStyle);
+        const stylePrompt = (selectedStyleItem === null || selectedStyleItem === void 0 ? void 0 : selectedStyleItem.prompt) || '';
+        const moodValue = (selectedMoodItem === null || selectedMoodItem === void 0 ? void 0 : selectedMoodItem.value) || 'normal';
+        const moodData = MOOD_PROMPTS[moodValue] || MOOD_PROMPTS.normal;
+        const prompt = moodData.prompt + stylePrompt;
+        const negative_prompt = moodData.negative_prompt;
+        try {
+            const response = await fetch(config.apiEndpoints.generate, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    us_id: config.userId,
+                    us_login: config.userLogin,
+                    wid: config.wid,
+                    workflow: 'txt2img_faceswap_avatar_api',
+                    prompt: prompt,
+                    negative_prompt: negative_prompt,
+                    width: (imageDimensions === null || imageDimensions === void 0 ? void 0 : imageDimensions.width) || 512,
+                    height: (imageDimensions === null || imageDimensions === void 0 ? void 0 : imageDimensions.height) || 512,
+                    bg_color: selectedBgColor || 'noremove',
+                    control_net: 0,
+                    style: '',
+                    img_data: uploadedImage,
+                }),
+            });
+            const data = await response.json();
+            if (!response.ok || !data.success) {
+                throw new Error(data.error || 'Error generating avatar');
+            }
+            setGeneratedResult(data.data);
+            console.log('🎭 AvatarAI generation started:', data.data);
+        }
+        catch (err) {
+            const errorMsg = err instanceof Error ? err.message : 'An error occurred';
+            setError(errorMsg);
+            onError === null || onError === void 0 ? void 0 : onError(errorMsg);
+        }
+        finally {
+            setIsGenerating(false);
+        }
+    };
+    const handleStartAgain = () => {
+        setGeneratedResult(null);
+        setProgressPercent(null);
+        setGeneratedImageUrl(null);
+        setError(null);
+    };
+    const handleDownload = async () => {
+        if (!generatedImageUrl)
+            return;
+        try {
+            const response = await fetch(generatedImageUrl);
+            const blob = await response.blob();
+            const objectUrl = URL.createObjectURL(blob);
+            const link = document.createElement('a');
+            link.href = objectUrl;
+            link.download = `avatar-${Date.now()}.png`;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            URL.revokeObjectURL(objectUrl);
+        }
+        catch (_a) {
+            window.open(generatedImageUrl, '_blank');
+        }
+    };
+    const isProcessing = isGenerating || (!!generatedResult && !generatedImageUrl);
+    const canGenerate = !!uploadedImage && !!selectedStyle && !isProcessing && !!config;
+    return (react_1.default.createElement("div", { style: { width: '100%', backgroundColor: mergedTheme.backgroundColor } },
+        react_1.default.createElement("div", { style: { maxWidth: '1280px', margin: '0 auto', padding: '0 16px' } },
+            react_1.default.createElement("div", { style: {
+                    backgroundColor: mergedTheme.cardBackground,
+                    borderRadius: '8px',
+                    boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
+                    padding: '32px',
+                } },
+                react_1.default.createElement("h2", { style: { fontSize: 'clamp(24px, 4vw, 36px)', fontWeight: 700, color: mergedTheme.textColor, marginBottom: '32px' } }, mergedTexts.styleTitle),
+                react_1.default.createElement("div", { style: { display: 'flex', gap: '32px', flexWrap: 'wrap' } },
+                    react_1.default.createElement("div", { style: {
+                            flex: '1 1 300px',
+                            minHeight: '500px',
+                            border: `2px dashed ${generatedImageUrl ? mergedTheme.primaryColor : '#d1d5db'}`,
+                            borderRadius: '8px',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            position: 'relative',
+                            padding: '32px',
+                            backgroundColor: '#fff',
+                            transition: 'border-color 0.3s',
+                        } },
+                        react_1.default.createElement("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileChange, style: { display: 'none' } }),
+                        uploadedImage ? (react_1.default.createElement(react_1.default.Fragment, null,
+                            react_1.default.createElement("img", { src: generatedImageUrl && !isComparing ? generatedImageUrl : uploadedImage, alt: generatedImageUrl && !isComparing ? 'Generated avatar' : 'Uploaded photo', style: { width: '100%', objectFit: 'contain', maxHeight: '450px', borderRadius: '8px' } }),
+                            generatedImageUrl && (react_1.default.createElement("div", { style: {
+                                    position: 'absolute', top: '16px', left: '16px',
+                                    backgroundColor: isComparing ? 'rgba(0,0,0,0.6)' : mergedTheme.primaryColor,
+                                    color: 'white', fontSize: '11px', fontWeight: 700,
+                                    padding: '4px 10px', borderRadius: '9999px',
+                                    transition: 'background-color 0.2s',
+                                } }, isComparing ? 'ORIGINAL' : 'RESULT')),
+                            !generatedImageUrl && (react_1.default.createElement("button", { onClick: handleRemoveImage, style: {
+                                    position: 'absolute', top: '16px', right: '16px',
+                                    width: '48px', height: '48px', backgroundColor: '#FF6B6B',
+                                    borderRadius: '50%', border: 'none', cursor: 'pointer',
+                                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                                    boxShadow: '0 2px 8px rgba(0,0,0,0.2)',
+                                } },
+                                react_1.default.createElement("svg", { fill: "none", stroke: "white", viewBox: "0 0 24 24", style: { width: '24px', height: '24px' } },
+                                    react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })))),
+                            generatedImageUrl && (react_1.default.createElement("button", { onMouseDown: () => setIsComparing(true), onMouseUp: () => setIsComparing(false), onMouseLeave: () => setIsComparing(false), onTouchStart: () => setIsComparing(true), onTouchEnd: () => setIsComparing(false), style: {
+                                    position: 'absolute', bottom: '16px', left: '50%', transform: 'translateX(-50%)',
+                                    backgroundColor: 'rgba(0,0,0,0.65)', color: 'white',
+                                    fontWeight: 700, fontSize: '13px', padding: '10px 20px',
+                                    borderRadius: '9999px', border: 'none', cursor: 'pointer',
+                                    display: 'flex', alignItems: 'center', gap: '8px',
+                                    backdropFilter: 'blur(4px)',
+                                    userSelect: 'none',
+                                    whiteSpace: 'nowrap',
+                                } },
+                                react_1.default.createElement("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", style: { width: '16px', height: '16px' } },
+                                    react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" }),
+                                    react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" })),
+                                "Hold to compare")))) : (react_1.default.createElement("button", { onClick: handleUploadClick, style: {
+                                backgroundColor: mergedTheme.primaryColor, color: 'white',
+                                fontWeight: 700, fontSize: '18px', padding: '16px 32px',
+                                borderRadius: '9999px', border: 'none', cursor: 'pointer',
+                                display: 'flex', alignItems: 'center', gap: '12px',
+                            }, onMouseEnter: e => { e.currentTarget.style.backgroundColor = mergedTheme.primaryHoverColor || '#ff1600'; }, onMouseLeave: e => { e.currentTarget.style.backgroundColor = mergedTheme.primaryColor || '#FF5500'; } },
+                            react_1.default.createElement("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", style: { width: '24px', height: '24px' } },
+                                react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" })),
+                            mergedTexts.uploadButton))),
+                    react_1.default.createElement("div", { style: { flex: '1 1 300px', display: 'flex', flexDirection: 'column', gap: '24px' } },
+                        react_1.default.createElement("div", null,
+                            react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '16px' } },
+                                react_1.default.createElement("svg", { fill: "none", stroke: mergedTheme.primaryColor, viewBox: "0 0 24 24", style: { width: '24px', height: '24px' } },
+                                    react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" })),
+                                react_1.default.createElement("h3", { style: { fontSize: '20px', fontWeight: 700, color: mergedTheme.textColor, margin: 0 } }, mergedTexts.styleSectionTitle)),
+                            react_1.default.createElement("div", { className: "avatarai-styles-grid", style: { maxHeight: '480px', overflowY: 'auto', padding: '4px' } },
+                                react_1.default.createElement("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '12px' } }, styles.map((style) => (react_1.default.createElement("button", { key: style.id, onClick: () => setSelectedStyle(style.id), title: style.name, style: {
+                                        position: 'relative', aspectRatio: '1 / 1', borderRadius: '12px',
+                                        overflow: 'hidden', border: 'none', padding: 0, cursor: 'pointer',
+                                        outline: selectedStyle === style.id ? `3px solid ${mergedTheme.primaryColor}` : '3px solid transparent',
+                                        outlineOffset: '2px',
+                                        transform: selectedStyle === style.id ? 'scale(1.03)' : 'scale(1)',
+                                        transition: 'transform 0.2s, outline-color 0.2s',
+                                    }, onMouseEnter: e => { if (selectedStyle !== style.id)
+                                        e.currentTarget.style.transform = 'scale(1.03)'; }, onMouseLeave: e => { if (selectedStyle !== style.id)
+                                        e.currentTarget.style.transform = 'scale(1)'; } },
+                                    react_1.default.createElement("img", { src: style.image, alt: style.name, style: { width: '100%', height: '100%', objectFit: 'cover', display: 'block' } }))))))),
+                        react_1.default.createElement("div", { style: { display: 'flex', gap: '24px', flexWrap: 'wrap' } },
+                            react_1.default.createElement("div", { style: { flex: '1 1 140px' } },
+                                react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '16px' } },
+                                    react_1.default.createElement("svg", { fill: "none", stroke: mergedTheme.primaryColor, viewBox: "0 0 24 24", style: { width: '24px', height: '24px' } },
+                                        react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" })),
+                                    react_1.default.createElement("h3", { style: { fontSize: '18px', fontWeight: 700, color: mergedTheme.textColor, margin: 0 } }, mergedTexts.moodsTitle)),
+                                react_1.default.createElement("div", { style: { display: 'flex', gap: '8px' } }, moods.map((mood) => (react_1.default.createElement("button", { key: mood.id, onClick: () => setSelectedMood(mood.id), title: mood.name, style: {
+                                        width: '40px', height: '40px', borderRadius: '50%',
+                                        border: selectedMood === mood.id ? 'none' : `2px solid ${mergedTheme.primaryColor}`,
+                                        backgroundColor: selectedMood === mood.id ? mergedTheme.primaryColor : 'white',
+                                        padding: '8px', cursor: 'pointer',
+                                        display: 'flex', alignItems: 'center', justifyContent: 'center',
+                                        transform: selectedMood === mood.id ? 'scale(1.1)' : 'scale(1)',
+                                        outline: selectedMood === mood.id ? `4px solid ${mergedTheme.primaryColor}44` : 'none',
+                                        transition: 'all 0.2s',
+                                    }, onMouseEnter: e => { e.currentTarget.style.transform = 'scale(1.1)'; }, onMouseLeave: e => { e.currentTarget.style.transform = selectedMood === mood.id ? 'scale(1.1)' : 'scale(1)'; } },
+                                    react_1.default.createElement("img", { src: mood.icon, alt: mood.name, style: {
+                                            width: '100%', height: '100%', objectFit: 'contain',
+                                            filter: selectedMood === mood.id ? 'brightness(0) invert(1)' : 'none',
+                                        } })))))),
+                            react_1.default.createElement("div", { style: { flex: '1 1 140px' } },
+                                react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '16px' } },
+                                    react_1.default.createElement("svg", { fill: "none", stroke: mergedTheme.primaryColor, viewBox: "0 0 24 24", style: { width: '24px', height: '24px' } },
+                                        react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" })),
+                                    react_1.default.createElement("h3", { style: { fontSize: '18px', fontWeight: 700, color: mergedTheme.textColor, margin: 0 } }, mergedTexts.backgroundTitle)),
+                                react_1.default.createElement("input", { ref: colorPickerRef, type: "color", onChange: handleColorChange, style: { display: 'none' } }),
+                                react_1.default.createElement("div", { style: { display: 'flex', gap: '8px', alignItems: 'center', flexWrap: 'wrap' } },
+                                    react_1.default.createElement("button", { onClick: handleColorPickerClick, title: "Select color", style: {
+                                            width: '48px', height: '48px', borderRadius: '50%',
+                                            border: '2px solid #d1d5db', backgroundColor: 'white', cursor: 'pointer',
+                                            display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '8px',
+                                            outline: selectedBgColor && selectedBgColor !== 'transparent' ? `4px solid ${mergedTheme.primaryColor}44` : 'none',
+                                            transform: selectedBgColor && selectedBgColor !== 'transparent' ? 'scale(1.1)' : 'scale(1)',
+                                            transition: 'all 0.2s',
+                                        }, onMouseEnter: e => { e.currentTarget.style.transform = 'scale(1.1)'; }, onMouseLeave: e => { e.currentTarget.style.transform = selectedBgColor && selectedBgColor !== 'transparent' ? 'scale(1.1)' : 'scale(1)'; } },
+                                        react_1.default.createElement("img", { src: "https://d2obs2d3lmpnq9.cloudfront.net/ADS/cmp%20color%20picker/ColorPicker_CONsombra%201%20%281%29.svg", alt: "Color Picker", style: { width: '32px', height: '32px', objectFit: 'contain' } })),
+                                    recentColors.map((color, index) => (react_1.default.createElement("button", { key: index, onClick: () => handleRecentColorClick(color), title: `Recent color ${index + 1}`, style: {
+                                            width: '48px', height: '48px', borderRadius: '50%',
+                                            border: selectedBgColor === color ? `2px solid ${mergedTheme.primaryColor}` : '2px solid #d1d5db',
+                                            backgroundColor: color, cursor: 'pointer',
+                                            outline: selectedBgColor === color ? `4px solid ${mergedTheme.primaryColor}44` : 'none',
+                                            transform: selectedBgColor === color ? 'scale(1.1)' : 'scale(1)',
+                                            transition: 'all 0.2s',
+                                        }, onMouseEnter: e => { e.currentTarget.style.transform = 'scale(1.1)'; }, onMouseLeave: e => { e.currentTarget.style.transform = selectedBgColor === color ? 'scale(1.1)' : 'scale(1)'; } }))),
+                                    react_1.default.createElement("button", { onClick: handleTransparentClick, title: "Transparent", style: {
+                                            width: '48px', height: '48px', borderRadius: '50%',
+                                            border: selectedBgColor === 'transparent' ? `2px solid ${mergedTheme.primaryColor}` : '2px solid #d1d5db',
+                                            backgroundImage: 'repeating-linear-gradient(45deg, #ddd 0, #ddd 1px, transparent 0, transparent 50%), repeating-linear-gradient(-45deg, #ddd 0, #ddd 1px, transparent 0, transparent 50%)',
+                                            backgroundSize: '10px 10px', backgroundColor: '#fff', cursor: 'pointer',
+                                            outline: selectedBgColor === 'transparent' ? `4px solid ${mergedTheme.primaryColor}44` : 'none',
+                                            transform: selectedBgColor === 'transparent' ? 'scale(1.1)' : 'scale(1)',
+                                            transition: 'all 0.2s',
+                                        }, onMouseEnter: e => { e.currentTarget.style.transform = 'scale(1.1)'; }, onMouseLeave: e => { e.currentTarget.style.transform = selectedBgColor === 'transparent' ? 'scale(1.1)' : 'scale(1)'; } })))))),
+                error && (react_1.default.createElement("div", { style: { padding: '12px', backgroundColor: '#fef2f2', border: '1px solid #fecaca', borderRadius: '8px', marginTop: '16px' } },
+                    react_1.default.createElement("p", { style: { color: '#dc2626', fontSize: '14px', margin: 0 } }, error))),
+                react_1.default.createElement("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '16px', marginTop: '32px' } },
+                    react_1.default.createElement("button", { onClick: handleStartAgain, disabled: !generatedResult, style: {
+                            backgroundColor: generatedResult ? mergedTheme.primaryColor : '#d1d5db',
+                            color: generatedResult ? 'white' : '#9ca3af',
+                            fontWeight: 700, fontSize: '18px', padding: '16px 32px',
+                            borderRadius: '9999px', border: 'none',
+                            cursor: generatedResult ? 'pointer' : 'not-allowed',
+                            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '12px',
+                        }, onMouseEnter: e => { if (generatedResult)
+                            e.currentTarget.style.backgroundColor = mergedTheme.primaryHoverColor || '#ff1600'; }, onMouseLeave: e => { if (generatedResult)
+                            e.currentTarget.style.backgroundColor = mergedTheme.primaryColor || '#FF5500'; } },
+                        react_1.default.createElement("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", style: { width: '24px', height: '24px' } },
+                            react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" })),
+                        mergedTexts.startAgainButton),
+                    react_1.default.createElement("button", { onClick: handleGenerate, disabled: !canGenerate, style: {
+                            backgroundColor: canGenerate ? '#FF6B6B' : '#d1d5db',
+                            color: canGenerate ? 'white' : '#9ca3af',
+                            fontWeight: 700, fontSize: '18px', padding: '16px 32px',
+                            borderRadius: '9999px', border: 'none',
+                            cursor: canGenerate ? 'pointer' : 'not-allowed',
+                            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '12px',
+                        }, onMouseEnter: e => { if (canGenerate)
+                            e.currentTarget.style.backgroundColor = '#ff5252'; }, onMouseLeave: e => { if (canGenerate)
+                            e.currentTarget.style.backgroundColor = '#FF6B6B'; } }, isGenerating ? (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement("svg", { style: { width: '24px', height: '24px' }, className: "animate-spin", fill: "none", viewBox: "0 0 24 24" },
+                            react_1.default.createElement("circle", { style: { opacity: 0.25 }, cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+                            react_1.default.createElement("path", { style: { opacity: 0.75 }, fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })),
+                        mergedTexts.generatingButton)) : (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", style: { width: '24px', height: '24px' } },
+                            react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" })),
+                        mergedTexts.generateButton))),
+                    react_1.default.createElement("button", { onClick: handleDownload, disabled: !generatedImageUrl, style: {
+                            backgroundColor: generatedImageUrl ? mergedTheme.primaryColor : '#d1d5db',
+                            color: generatedImageUrl ? 'white' : '#9ca3af',
+                            fontWeight: 700, fontSize: '18px', padding: '16px 32px',
+                            borderRadius: '9999px', border: 'none',
+                            cursor: generatedImageUrl ? 'pointer' : 'not-allowed',
+                            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '12px',
+                        }, onMouseEnter: e => { if (generatedImageUrl)
+                            e.currentTarget.style.backgroundColor = mergedTheme.primaryHoverColor || '#ff1600'; }, onMouseLeave: e => { if (generatedImageUrl)
+                            e.currentTarget.style.backgroundColor = mergedTheme.primaryColor || '#FF5500'; } },
+                        react_1.default.createElement("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", style: { width: '24px', height: '24px' } },
+                            react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" })),
+                        mergedTexts.downloadButton))))));
+}
+function AvatarAIForYouCard({ title, description, ctaText, ctaHref, desktopImage, mobileImage, imageAlt = '', imageOnRight = true, titleColor = '#001B5E', descriptionColor = '#001B5E', ctaColor = '#FF5500', ctaHoverColor = '#ff1600', backgroundColor = '#F9F9F9', paddingClass = 'py-12 md:py-16 lg:py-20', }) {
+    const effectiveMobileImage = mobileImage || desktopImage;
+    const imageColumn = (react_1.default.createElement("div", { className: `${imageOnRight ? '' : 'order-2 md:order-1'} overflow-hidden` },
+        react_1.default.createElement("img", { src: desktopImage, alt: imageAlt, className: "hidden md:block w-full h-auto object-contain" }),
+        react_1.default.createElement("img", { src: effectiveMobileImage, alt: imageAlt, className: "block md:hidden w-full h-auto object-contain" })));
+    const contentColumn = (react_1.default.createElement("div", { className: `${imageOnRight ? '' : 'order-1 md:order-2'} text-center md:text-left` },
+        react_1.default.createElement("h3", { className: "text-2xl md:text-3xl font-bold mb-4 md:mb-6", style: { color: titleColor } }, title),
+        react_1.default.createElement("p", { className: "text-base md:text-lg mb-6 md:mb-8 leading-relaxed", style: { color: descriptionColor } }, description),
+        react_1.default.createElement("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; } }, ctaText)));
+    return (react_1.default.createElement("section", { className: "w-full", style: { backgroundColor } },
+        react_1.default.createElement("div", { className: `container mx-auto px-4 ${paddingClass}` },
+            react_1.default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 lg:gap-16 items-start" }, imageOnRight ? (react_1.default.createElement(react_1.default.Fragment, null,
+                contentColumn,
+                imageColumn)) : (react_1.default.createElement(react_1.default.Fragment, null,
+                imageColumn,
+                contentColumn))))));
+}
+function AvatarAIPage({ componentProps, heroDesktopImage, heroMobileImage, heroAlt = '', backgroundColor = '#F9F9F9', componentPaddingClass = 'py-8 md:py-12', }) {
+    const effectiveHeroMobile = heroMobileImage || heroDesktopImage;
+    return (react_1.default.createElement("div", { style: { backgroundColor } },
+        heroDesktopImage && (react_1.default.createElement("section", { style: { width: '100%' } },
+            react_1.default.createElement("img", { src: heroDesktopImage, alt: heroAlt, style: { width: '100%', height: 'auto' }, className: "hidden md:block" }),
+            react_1.default.createElement("img", { src: effectiveHeroMobile, alt: heroAlt, style: { width: '100%', height: 'auto' }, className: "block md:hidden" }))),
+        react_1.default.createElement("section", { className: `w-full ${componentPaddingClass}`, style: { backgroundColor } },
+            react_1.default.createElement(AvatarAI, Object.assign({}, componentProps)))));
+}
+exports.default = AvatarAI;
+//# sourceMappingURL=AvatarAI.js.map